CSS Box Shadow Generator
Powerful CSS Box Shadow generator supporting multiple layers, real-time preview, and code generation.
Preview
Box Color
Background Color
Layers
Layer 1
Layer 2
Properties
Shadow Color
Opacity15%
Horizontal Offset (X)10px
Vertical Offset (Y)10px
Blur Radius20px
Spread Radius0px
CSS Code
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.15),
-10px -10px 20px 0px rgba(255, 255, 255, 0.8);About This Tool
This is a powerful CSS Box Shadow generator designed for frontend developers and designers. It supports adding multiple shadow layers, allowing fine-tuning of horizontal offset, vertical offset, blur radius, spread radius, color, and opacity for each layer. Supports Inset mode. Provides a real-time preview box, WYSIWYG, and one-click copying of cross-browser compatible CSS code after adjustment.
Features
- 🎨 Multi-layer Shadows: Support adding infinite shadow layers
- ⚡ Real-time Preview: Instantly view shadow effects as you adjust
- 🔧 Fine Control: Independently adjust X/Y offset, blur, spread, color
- 📥 Inset Support: Toggle Inset shadow mode with one click
- 📋 One-click Copy: Generate standard CSS code and copy quickly
- 🌈 Color Adjustment: Support HEX/RGB/HSL color formats