Developer Tool
CSS BoxShadow
Build layered, precise box shadows visually. Copy production-ready CSS instantly. Supports multiple layers, inset, spread, blur and full RGBA color control.
Instant Preview
Multi-Layer
No Signup
Copy-Ready CSS
Shadow Layers
1 layer
Layer Controls
Layer 1
Horizontal Offset (X)
0px
Vertical Offset (Y)
0px
Blur Radius
0px
Spread Radius
0px
Opacity
50%
Shadow Color
Shadow Type
Box Settings
CSS Output
Click code to copy
Presets
CSS Reference
Syntax
box-shadow: offset-x offset-y blur spread color
Inset
Add inset keyword before values to create an inner shadow instead of an outer drop shadow.
Multiple Layers
Stack multiple shadows with commas: 2px 2px 4px #000, -2px -2px 4px #fff
RGBA Colors
Use rgba(0,0,0,0.3) for semi-transparent shadows. Adjust opacity for depth and realism.
Blur vs Spread
Blur softens shadow edges. Spread expands or shrinks the shadow size before blurring is applied.
Browser Support
Supported in all modern browsers. No prefix needed since 2012. Safe to use without fallbacks.
Copied!