Box Shadow Generator
100% PrivateWebsite & Webmaster ToolsCompose CSS box shadows layer by layer with offsets, blur, spread and opacity.
Runs entirely in your browser. Your input is not uploaded to Ovatly or anywhere else.
- 1Adjust the first layer's sliders: horizontal and vertical offset, blur, spread.
- 2Pick the shadow color and its opacity.
- 3Add more layers for depth, or tick Inset for an inner shadow.
- 4Copy the generated box-shadow declaration.
One layer with offset 0px / 8px, blur 24px, spread 0px, color #000000 at 20% opacity produces: box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);
- Blur radius cannot be negative in CSS, so the slider starts at 0. Spread may be negative, which shrinks the shadow.
- Color plus opacity is emitted as rgba(), keeping the exact alpha you set (shown to two decimals where needed).
- Very large blur values on very large elements can be expensive for browsers to repaint; the generator allows them because print-style effects sometimes need them.
Real shadows have a tight dark core and a wide soft halo. Two layers, one small and darker, one large and lighter, look far more natural than a single blur.
About this tool
The Box Shadow Generator composes box-shadow CSS layer by layer: offsets, blur, spread, color with opacity, and inset shadows, with a live preview on a card. Stack up to four layers for realistic depth, then copy a single box-shadow declaration that matches the preview exactly.
Related tools
Part of Ovatly's free tools in Website & Webmaster Tools.