Box shadow generator
Stack a few gentle layers for shadows that look natural, then copy the CSS.
Sealed on this device
Runs in your browser. Nothing is uploaded.
Sealed
Preview
Shadow layers
No shadow yet. Add a layer to start.
CSS code
How it works
-
Start from a preset
Pick a soft, layered, floating, sharp or inner shadow as a starting point.
-
Adjust the layers
Tune each layer’s offset, blur, spread, color and opacity, and add or remove layers. The preview updates as you go.
-
Copy the CSS
Copy the box-shadow declaration and paste it into your stylesheet.
Frequently asked questions
What do blur and spread do?
Blur softens the edge of the shadow: the higher the value, the more diffuse it gets. Spread grows or shrinks the shadow before the blur is applied. A negative spread with a large blur gives the soft, lifted look common in modern interfaces.
Why use several shadow layers?
Real shadows have a dark, tight core close to the object and a soft, wide halo further away. Stacking a small sharp layer with one or two larger, lighter layers reproduces that and looks far more natural than a single shadow.
What is an inset shadow?
An inset shadow is drawn inside the element instead of outside it. It makes a surface look pressed in, which works well for input fields or pressed buttons.
Will the shadow work in all browsers?
Yes. box-shadow, multiple layers and the rgb() color syntax used in the code are supported by all current browsers.
Does a box shadow slow down my page?
Static shadows are cheap to draw. Very large blurs on many elements, or animating the shadow itself, can cost more. To animate a shadow smoothly, fade the opacity of a pseudo-element that carries the shadow instead.