Box Shadow
Design custom box shadows with multiple layers and a live preview.
Free & unlimited
Shape
Shadow presets
Shadow layers (1)
Layer 1
Color
Offset X
0pxOffset Y
4pxBlur
16pxSpread
0pxOpacity
15%Generated CSS
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.15);
All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Adjust shadow properties
Set offset X/Y, blur, spread, and color.
- 2
Add layers
Add multiple shadow layers for complex effects.
- 3
Preview
See the shadow update in real-time on the preview element.
- 4
Copy CSS
Copy the box-shadow CSS property.
- Subtle shadows (low blur, low offset) look most professional.
- Use inset shadows for pressed/recessed effects.
- Multiple shadow layers create richer, more realistic depth.
- Match shadow color to your background for a natural look.
- Multi-layer
- Inset option
- Color picker
- Blur & spread
- Live preview
- CSS output
- Create card elevation effects.
- Design button hover states with shadows.
- Build depth in flat UI designs.