CSS Box Shadow Generator
Build up to four CSS box-shadow layers, compare light and dark previews, tune inset and opacity, and copy CSS locally.
02 / Shadow layers
Tune each layer
Earlier layers sit on top within each shadow type. Select a layer to edit; inner and outer shadows can share the stack.
Up to 4 layers; offsets ±100px, blur 0–200px, spread ±100px. These are editor limits, not CSS limits.
03 / Live preview
Compare light and dark
Preview scale: 82%. Surface, card and corners are for comparison only and are not copied.
04 / CSS
Paste onto your element
box-shadow:
0px 8px 24px 0px rgba(24, 32, 42, 0.15);Check clipping and focus outlines in your real component. Settings stay on this page without upload, storage or URL parameters. Build a gradient surface →
How to use this tool
Start from a preset, select a shadow layer, then adjust its offsets, blur, spread, color and opacity. Reorder layers, compare the two surfaces, and copy the declaration onto your element.
When not to use it
The editor handles box shadows in px, not text-shadow, drop-shadow(), pseudo-elements or arbitrary CSS imports. Test clipping, focus visibility and paint performance in the receiving component.
Read the guide →