Box-shadow generator
Compose multi-layer CSS shadows with a live preview.
- Instant
- Free
- Private (processed locally)
- No sign-up
Shadows with real depth, no guesswork
Tuning a shadow by hand means reloading the page ten times. Here you move the sliders and the preview reacts live. Stack several layers for realistic depth, then copy the exact CSS.
-
Adjust the layer
X/Y offset, blur, spread, color and opacity.
-
Add layers
Mix a sharp and a diffuse shadow for a natural look.
-
Copy the CSS
The full box-shadow property, ready to paste.
Understanding the syntax
| Value | Role |
|---|---|
| offset-x | Horizontal offset (right if positive) |
| offset-y | Vertical offset (down if positive) |
| blur | Blur radius (larger = softer) |
| spread | Grows (+) or shrinks (−) the shadow |
| color | Color, often rgba() for opacity |
| inset | Places the shadow inside the box |
Everything is generated in your browser. Default example: box-shadow: 0px 10px 25px -5px rgba(124, 58, 237, 0.35);
Frequently asked questions
What do the box-shadow values mean?
In order: horizontal offset, vertical offset, blur radius, spread radius, then the color. Example: “0 10px 25px -5px rgba(124, 58, 237, 0.35)” offsets the shadow 10px down, blurs it over 25px and shrinks it by 5px.
What is the spread radius for?
It grows (positive value) or shrinks (negative value) the shadow before the blur. A negative spread is great for soft, tucked-in shadows, like a card floating slightly above the page.
How do I stack several shadows?
Separate each layer with a comma. The first one listed is drawn on top. Combining a tight, sharp shadow with a wide, diffuse one looks far more natural than a single shadow.
What is the difference between box-shadow and drop-shadow?
box-shadow follows the box rectangle (and its border-radius). filter: drop-shadow() follows the real shape, including transparency — ideal for cut-out PNGs and SVGs. For a card or button, box-shadow is the right choice.