CSS Box Shadow Generator
Design box shadows with live preview. Support for multiple shadows and inset.
box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.20);Horizontal Offset4px
Vertical Offset4px
Blur Radius16px
Spread Radius0px
Opacity20%
#000000
About CSS Box Shadow Generator
The CSS Box Shadow Generator gives you sliders to control every aspect of a box shadow — horizontal and vertical offset, blur radius, spread radius, color, opacity, and inset mode — with a live preview that updates as you drag. Multiple layers are supported for complex shadow effects.
Box shadows add depth and dimensionality to UI components but the CSS syntax has five parameters that are easy to get wrong. This tool makes it visual and copies the exact CSS you need.
Presets for common shadow styles (card, button, floating, and deep) are included to get you started quickly.
Features
- ✓Live preview with adjustable sliders
- ✓Control offset, blur, spread, color, and opacity
- ✓Multiple shadow layers
- ✓Inset shadow support
- ✓Common shadow presets
- ✓Copy CSS with one click
Common Use Cases
- →Designing card shadow styles for UI components
- →Creating button depth effects
- →Building floating element shadows
- →Matching shadows from a design mockup to CSS