CSS Box Shadow Generator
Generate CSS box shadow code visually. Adjust blur, spread, offset, color and opacity. Copy box-shadow CSS instantly.
About this calculator
Tune horizontal and vertical offset, blur, spread, colour and opacity with sliders, tick Inset if needed, and copy the exact box-shadow CSS.
Every control updates a live preview and the CSS code at once. Copy the declaration into your stylesheet.
How to use it
- Move the sliders.
- Choose the shadow colour and opacity.
- Press Copy.
Box-shadow syntax
box-shadow: offset-x offset-y blur spread color. Positive x moves the shadow right, positive y down. Blur softens the edge, spread grows or shrinks it, and inset draws it inside. Use semi-transparent colours such as rgba(0,0,0,0.1); pure black shadows look harsh. Layer several shadows separated by commas for realistic depth.
Worked example
Starter shadows
| Subtle card | 0 1px 3px rgba(0,0,0,.12) |
| Raised | 0 4px 6px -1px rgba(0,0,0,.1) |
| Floating | 0 10px 25px -5px rgba(0,0,0,.2) |
| Inset | inset 0 2px 4px rgba(0,0,0,.15) |
Tips and common mistakes
- Keep opacity low (5 to 20%).
- Use a negative spread with a larger blur for soft, natural shadows.
- Larger elements need larger, softer shadows.
- Keep the light direction consistent across the page.
- Shadows are expensive on huge animated elements.
Frequently asked questions
What is box-shadow?
A CSS property that draws a shadow behind or inside an element.
What does spread do?
It grows or shrinks the shadow before blurring.
How do I make an inner shadow?
Add the inset keyword.
Can I stack shadows?
Yes, separate them with commas.
Does box-shadow affect layout?
No.
What colour should a shadow be?
A transparent dark, tinted slightly towards the background.