Box Shadow Generator
Build realistic CSS shadows by stacking layers, preview them on any background, and copy the CSS.
Layers (top layer is drawn on top)
Presets
CSS
How to create a CSS box-shadow
Start from a preset, then fine-tune each layer’s offset, blur, spread, color and opacity. Add layers to combine a tight contact shadow with a soft ambient one, the technique design systems use for realistic depth. Change the background and box color to test the shadow in light and dark designs, then copy the CSS.
Frequently asked questions
Why use more than one shadow layer?
Real shadows are soft far from an object and sharp close to it. Stacking a small, dark, tight shadow with a large, faint, blurry one looks far more natural than a single shadow.
What do blur and spread do?
Blur softens the edge: higher values give a wider, lighter fade. Spread grows (positive) or shrinks (negative) the shadow before blurring; negative spread with a downward offset makes a shadow that only shows below the element.
What is an inset shadow?
An inset shadow is drawn inside the element instead of outside, which makes it look pressed in. It is useful for input fields and pressed buttons.