Box Shadow Generator
Create beautiful CSS box shadows with live preview.
Preview
Shadow Layers
Box Settings
Presets
CSS Code
box-shadow: 0px 4px 6px -1px #00000026, 0px 2px 4px -2px #0000001a;Box Shadow Properties
- Offset X - Horizontal shadow offset (positive = right)
- Offset Y - Vertical shadow offset (positive = down)
- Blur - Shadow blur radius (larger = softer)
- Spread - Shadow size adjustment (positive = larger)
- Inset - Creates an inner shadow instead of outer
Tips for Better Shadows
- Use multiple layers for more realistic shadows
- Subtle shadows (low opacity, soft blur) look more natural
- Match shadow direction with your design's light source
- Use inset shadows for pressed/active button states