CSS Box Shadow Generator
Dial in CSS box shadows visually
What is CSS Box Shadow Generator?
This CSS box-shadow generator gives you sliders for horizontal and vertical offset, blur radius, spread radius, and opacity, supports inset shadows, previews the result live, and outputs CSS using the modern space-separated rgb() syntax. Everything is generated locally in your browser.
How to use CSS Box Shadow Generator
- 1Drag the sliders to set the four geometry values.
- 2Choose the shadow color and its opacity.
- 3Turn on "inset" when you want a recessed effect.
- 4Copy the CSS.
Frequently asked questions
How do I make a box shadow look realistic?+
Follow the rule of small offset, large blur, low opacity: a vertical offset of 1 to 4 pixels, a blur two to four times the offset, and an opacity between 0.06 and 0.16. Real shadows are soft and light; darkening the color just makes the UI look dirty.
How do I layer multiple box shadows?+
box-shadow accepts a comma-separated list. The usual recipe is one small, tight shadow for the contact edge plus one large, soft shadow for ambient light — for example `0 1px 2px rgb(0 0 0 / .08), 0 8px 24px rgb(0 0 0 / .08)`.
Related tools
All toolsImage Compressor
Compress images in your browser — no uploads
Image Format Converter
Convert between PNG, JPEG, WebP, and AVIF
Image Resizer
Resize images to exact dimensions, with optional aspect lock
Image to Base64
Turn images into data URIs with ready-to-use snippets
Favicon Generator
Generate multi-size icons and a favicon.ico
SVG Optimizer
Strip SVG cruft without touching path data