# Design box shadows visually instead of guessing values
Tweaking box-shadow by hand is tedious. Offset X, offset Y, blur radius, spread radius, color, opacity and inset all interact in subtle ways. This visual generator lets you stack multiple shadows, preview them live, and copy production-ready CSS. 5 Shadow layers per element
Live Preview updates on every slider move
5 Quick-start presets
# Layer multiple shadows for realistic depth
Real-world shadows are rarely a single uniform blur. Layering a tight shadow close to the element with a softer, wider shadow farther away creates natural depth. Use the + button to add layers and the layer tabs to switch between them.# Understanding each control
| Control | CSS value | Effect |
|---|---|---|
| Offset X | First length | Horizontal displacement. Positive moves shadow right. |
| Offset Y | Second length | Vertical displacement. Positive moves shadow down. |
| Blur | Third length | Blur radius. Larger creates softer, wider shadows. |
| Spread | Fourth length | Expands or shrinks the shadow. Negative shrinks. |
| Color & Opacity | rgba() | Shadow color with independent opacity control. |
| Inset | inset keyword | Renders the shadow inside the element border. |
Use a subtle background grid
The preview area shows a dotted grid so you can see how shadows extend beyond the element. Use negative spread values for shadows that sit tighter than the element itself.Best practice workflow
Start with a preset that matches your design direction.
Add layers to build realistic depth (tight shadow + soft shadow + ambient).
Use a negative spread on the soft shadow for a floating card effect.
Copy the generated CSS and paste it into your stylesheet.