CSS Box Shadow Generator - Visual Shadow Builder
Visually create CSS box shadow effects with live preview. Generate single or multiple box shadows with full control over offset, blur, spread, color, and inset.
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.