CSS Box Shadow Generator
Design a shadow, copy the CSS.
Runs entirely in your browser — nothing you enter is uploaded, logged, or tracked.
Dial in a CSS box-shadow with live sliders for horizontal and vertical offset, blur, spread and color — stack several layers for real depth — and copy production-ready CSS. Everything updates instantly in the preview.
CSS
Preview background
Frequently asked questions
Can I add more than one shadow?
Yes. Stack multiple shadow layers — they are combined into a single comma-separated box-shadow value, exactly as you would write by hand.
What is the difference between spread and blur?
Blur softens the shadow’s edge; spread grows (or, with a negative value, shrinks) the shadow’s size before it is blurred.
How do I make an inner shadow?
Toggle “inset” on a layer to draw the shadow inside the element instead of behind it.