Box Shadow Generator

How to use the Box Shadow Generator

1. Adjust the sliders for horizontal offset, vertical offset, blur, and spread to shape your shadow.
2. Pick a shadow color and set the opacity level.
3. Add additional shadow layers for more depth or complex effects.
4. Preview the result in real time on the preview card.
5. Click the copy button to copy the generated CSS to your clipboard.

Why real shadows use more than one layer

A single box-shadow with a large blur often looks flat or artificial compared to real-world shadow behavior, where a surface actually casts two distinct effects: a tight, darker shadow close to the object, and a softer, lighter, more spread-out shadow further away. Stacking two box-shadow values (one tight and dark, one soft and light) mimics this and is the technique behind most of the convincingly "elevated card" shadows you see in modern UI design, a trick borrowed directly from Material Design's shadow system.

Frequently asked questions

What's the difference between blur and spread?

Blur radius softens the shadow's edges (larger = more feathered); spread radius expands or contracts the shadow's size before blur is applied, independent of the element's actual size.

Can I stack multiple shadows on one element?

Yes. Add multiple shadow layers and they're combined into a single comma-separated box-shadow declaration, which is exactly how CSS expects multiple shadows to be specified.

Does it support inset shadows?

Yes, toggle "inset" to generate an inward-facing shadow, useful for pressed-button or recessed-input effects rather than an elevated, floating look.