CSS Box Shadow Generator
Design box shadows visually with multiple layers and get CSS code
Shadow 1
About CSS Box Shadow Generator
Design CSS box shadows visually — adjust offset, blur, spread, color, and opacity with sliders. Layer multiple shadows and copy production-ready code.
- Layer multiple shadows with independent controls each
- Adjustable offset, blur, spread, color, and opacity
- Toggle inset shadows for pressed-in effects
- Live preview on a sample element
- Copies complete box-shadow CSS property
Everything runs in your browser — your data never leaves your device.
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.
