CSS Box Shadow Generator
Build a box-shadow with one or several stacked layers — adjust offset, blur, spread, color, opacity, and inset per layer with live preview, then copy the generated CSS.
Layer 1
How to use
- Adjust offset X/Y, blur, spread, color, and opacity for the first layer.
- Click "+ Add layer" to stack additional shadows for more depth.
- Copy the generated box-shadow CSS declaration.
FAQ
Why stack multiple shadow layers?
Real-world shadows aren't a single uniform blur — combining a tight, dark shadow with a soft, faint one (as most design systems do) reads as more natural and less "flat" than one large blurred shadow alone.
What does "inset" do?
Draws the shadow inside the element's border instead of outside, producing a pressed-in/carved look rather than a raised one.