Box Shadow Generator

Frequently asked questions

Is any data sent to a server?

No. The preview applies your CSS directly to a sample tile in the browser — no canvas trickery, no server. Your shadow stack and color picks live in localStorage on your device so the page picks up where you left off.

What's the difference between blur and spread?

Blur softens the shadow's edges over a distance — higher values make the shadow more diffuse. Spread expands or contracts the shadow's actual size before the blur is applied — positive spread makes the shadow bigger than the element, negative makes it smaller. They're often used together: spread to set size, blur to soften.

Why do designers stack multiple shadows?

Real shadows aren't a single uniform blur. A short, slightly-dark shadow defines the close contact with the surface; a longer, lighter shadow suggests distance. Stacking the two gives a much more natural sense of depth than a single shadow ever can.

When should I use inset?

Inset shadows draw inside the element instead of outside. They're how you make a button look pressed, give a card a soft inset border, or build neumorphic concave surfaces. They also work well for inputs that need to look recessed.

Why does my shadow look harsh on dark backgrounds?

Black shadows lose contrast on dark surfaces. Try a darker background hue with higher opacity (e.g. a dark navy at 60%) or a colored shadow that picks up the surface tone. The exact black-at-25% combo that looks soft on white is almost invisible on a #1a1a1a background.

Will my box-shadow CSS work everywhere?

Yes — box-shadow has been supported by every browser since 2011. Multiple comma-separated shadows, inset, and rgba colors all work across Chrome, Firefox, Safari, Edge, and mobile equivalents.

Related tools