CSS Box Shadow Generator
Build layered box shadows visually and copy the CSS
How to Use
- Add a layer — Click “Add Layer” to stack multiple shadows on the same element.
- Adjust the geometry — Set Offset X, Offset Y, Blur Radius, and Spread Radius with the sliders or number inputs.
- Pick a color — Choose the shadow color and fine-tune its opacity for subtle, realistic depth.
- Toggle inset — Switch any layer to an inner shadow when you need a recessed effect.
- Copy the CSS — Grab the generated
box-shadowdeclaration and paste it into your stylesheet.
Features
- Unlimited layers — Add, duplicate, and remove shadow layers freely; each layer is configured independently.
- Slider + number inputs — Drag for quick exploration or type exact pixel values for precision.
- Live preview — See every change instantly on a demo box, against a background color you control.
- Inset shadows — Create inner shadows for pressed, embossed, or neumorphic designs.
- 100% client-side — Everything runs in your browser; no data ever leaves your device.
Use Cases
- Card design: Compose a soft, multi-layer elevation shadow for cards and modals that feels natural on any background.
- Neumorphism: Combine light and dark inset layers to build the soft, extruded look without hand-writing CSS.
- Design handoff: Generate clean, production-ready
box-shadowvalues instead of eyeballing offsets in devtools.
Related Tools
- Color Picker — Find and convert the perfect shadow color.
- CSS Gradient Generator — Pair your shadows with custom CSS gradients.
- Color Contrast Checker — Verify text stays readable on your chosen background.
Frequently Asked Questions
What does the inset option do?
An inset shadow is drawn inside the element's border box instead of outside, which makes the element look pressed in or recessed. Enable the Inset toggle on any layer to turn that layer from a drop shadow into an inner shadow.
What is the difference between blur radius and spread radius?
The blur radius controls how soft the shadow edges are — larger values produce a more diffused, feathered shadow. The spread radius grows or shrinks the shadow in every direction: positive values make it larger than the element, negative values make it smaller.
Can I stack multiple shadows on one element?
Yes. CSS supports comma-separated shadow layers, and this generator lets you add, duplicate, and remove as many layers as you need. Layers are painted front to back, so the first layer in the list renders on top of the ones below it.