CSS Box-Shadow Generator
FreeDesign and export CSS box-shadows with a live visual editor — entirely in your browser.
Runs entirely in your browser. Nothing you enter is uploaded or stored.
Preview
Presets
Shadow layers
CSS
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);
How it works
What does each box-shadow parameter actually control?
Offset X and Offset Y move the shadow horizontally and vertically relative to the element — positive Y pushes it down, negative pulls it up. Blur radius controls how soft and spread-out the shadow's edge is; 0 gives a hard-edged shadow, larger values feather it out. Spread radius grows or shrinks the shadow's size independently of the element itself, before blur is applied. Color (with opacity) sets the shadow's color and how strong it looks — real shadows are almost always semi-transparent, not solid black.
What's the difference between an outer shadow and an inset shadow?
By default a box-shadow renders outside the element's edges, like light is casting a shadow behind it. Adding the "inset" keyword flips that — the shadow renders inside the element's border instead, which reads more like a carved-in or pressed-in effect. Same parameters, opposite direction.
Can I use more than one shadow at once?
Yes — CSS box-shadow accepts a comma-separated list of shadows, all rendered together, with later ones layering on top of earlier ones. Most polished, realistic-looking shadows in real interfaces are actually 2-3 stacked shadows with different blur/spread/opacity rather than a single one, which is exactly what this tool's multi-layer editor is built for.
Is anything about my design sent anywhere?
No. The preview and the generated CSS are both built entirely in your browser.