CSS Box Shadow Generator
Design realistic shadows visually — stack multiple layers, adjust color and alpha, toggle inset, and copy the CSS when you're happy.
Preview
Presets
Shadow layers
Generated CSS
Frequently asked questions
Can I stack multiple box shadows?
Yes. Use Add layer to stack several shadows, each with its own
offset, blur, spread, color, and alpha — the generated CSS
combines them into one comma-separated
box-shadow value, just like
you'd write by hand.
What is the difference between inset and outset shadows?
A normal (outset) shadow falls outside the box to lift it off the page, while an inset shadow is drawn inside the box for a carved or pressed-in look. Toggle inset per layer.
What do blur and spread control?
Blur softens the shadow's edge — higher values make it more diffuse — and spread grows or shrinks the shadow before blur is applied, so a positive spread enlarges it and a negative spread pulls it inward.
How do I use the result?
Pick a preset or tune the layers, watch the live preview, then click Copy CSS to paste the ready-to-use rule into your stylesheet. Everything runs in your browser.
Related tools
- CSS Gradient Build linear and radial gradients with live previews and code output.
- CSS Flexbox Generator Interactive flexbox playground with copy-ready CSS output.
- Color Palette Generator Generate harmonious palettes from a single seed color with one click.
- JWT Decoder Decode header, payload, and signature with expiry status checks.