📦 Box Shadow Generator
Create and customize CSS box shadows with real-time preview.
About Box Shadow Generator
CSS box shadow generator with offset, blur, spread, and color controls.
Features
- Offset/blur/spread
- Color picker
- Real-time preview
Frequently Asked Questions
How does CSS box-shadow work?
box-shadow: offset-x offset-y blur-radius spread-radius color. Example: box-shadow: 2px 4px 10px 0 rgba(0,0,0,0.2) creates a shadow 2px right, 4px down with 10px blur.
What is the difference between box-shadow and drop-shadow?
box-shadow creates a rectangular shadow around the element's box. drop-shadow() CSS filter creates a shadow that follows the element's actual shape (including transparent parts).
How to create multiple box shadows?
Separate shadows with commas: box-shadow: 2px 2px 5px rgba(0,0,0,0.3), -2px -2px 5px rgba(255,255,255,0.3) for layered or neumorphism effects.