CSS Generator
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.