CSS Box Shadow Generator
Build a CSS box-shadow visually with live preview.
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.25);How It Works
Set offset, blur, spread, color, opacity, and toggle inset. The CSS string updates live and the preview reflects exactly what you'll get in your stylesheet.
FAQ
What is spread?
Spread expands or shrinks the shadow before blur is applied.
Inset?
Draws the shadow inside the box instead of outside.
Multiple shadows?
This generator outputs one shadow; chain with commas in CSS to add more.
Browser support?
All modern browsers since 2011.
Performance?
Avoid huge blur values on animated elements.
Love using BreezyTools?
Go Pro for an ad-free experience, priority features, and support independent development — for less than a coffee a month.