CSS Box Shadow Generator
Design box shadows visually with multiple layers and get CSS code
Shadow 1
Share:
How to Use CSS Box Shadow Generator
- Adjust the shadow sliders: horizontal offset, vertical offset, blur, spread
- Set the shadow color and opacity
- Add multiple shadow layers or toggle inset, then copy the CSS
Frequently Asked Questions
Can I add multiple shadows?
Yes. Click 'Add Shadow' to layer multiple box shadows. Each shadow has independent controls for offset, blur, spread, color, and inset.
What is an inset shadow?
An inset shadow appears inside the element rather than outside, creating a pressed-in or recessed effect.
What is the spread value?
Spread expands or contracts the shadow. Positive values make the shadow larger, negative values make it smaller than the element.