Free CSS Box Shadow Generator
Craft the perfect CSS box shadow with sliders — offset, blur, spread, color and inset — then copy production-ready CSS.
0px
8px
24px
0px
18%
CSS output
–
How to use
- Drag the sliders for offset, blur and spread.
- Pick a shadow color and opacity — toggle inset for inner shadows.
- Copy the CSS and paste it into your stylesheet.
Frequently asked questions
What is the box-shadow syntax?
box-shadow: offset-x offset-y blur-radius spread-radius color; — add 'inset' for inner shadows.
How do I make a soft shadow?
Large blur (20–40px), small spread, low opacity (10–25%).
Can I layer multiple shadows?
Yes — comma-separate them. This tool generates one; duplicate and tweak for layers.
Is the generator free?
Yes — free, no signup.