🔧 Utility Tools
CSS Box Shadow Generator
Visual box-shadow builder with live preview. Adjust offset, blur, spread, color, and inset. Copy production-ready CSS instantly.
🎨 Used 15,847 times this month
CSS output
box-shadow: 4px 8px 24px 0 rgba(0, 0, 0, 0.3);
💡 Ctrl+D to bookmark for next time
How it works
01
Adjust Sliders
Offset, blur, spread, and color.
02
Live Preview
See the shadow update in real time.
03
Copy CSS
Paste into your stylesheet.
Frequently asked questions
What is spread?
Spread expands or contracts the shadow before blur is applied. Positive values make it larger, negative values shrink it. Rare in design — usually 0.
What is inset?
Inset creates an inner shadow (shadow drawn inside the box instead of outside). Great for pressed button effects.
Can I stack multiple shadows?
Yes in CSS — separate them with commas: `box-shadow: shadow1, shadow2`. This tool generates one shadow at a time; combine them manually.
Is my data uploaded?
No. Everything runs in your browser.
All tools are free, browser-based, and process files locally. Read our Privacy Policy | Visit our blog.