CSS box-shadow generator
Generate a CSS box-shadow with a live preview and copy-ready code.
🔒 100% client-side — no data sent
Generate a CSS box-shadow with a live preview and grab the ready-to-copy code for your project. Tune the offset, blur, spread, color and inset to craft polished depth effects. Everything is computed in your browser, with no signup and no data sent.
FAQ
How does the box-shadow property work?
box-shadow takes a horizontal and vertical offset, a blur radius, a spread and a color, for example: box-shadow: 4px 4px 10px 0 rgba(0,0,0,0.2);
How do I create an inner shadow (inset)?
Add the inset keyword before the shadow values to cast it inside the element rather than outside.
Can I apply multiple shadows to one element?
Yes, just separate each shadow with a comma in the same box-shadow declaration to layer them.
What's the difference between blur and spread?
Blur softens the shadow's edges, while spread grows or shrinks its size before the blur is applied.