CSS Box Shadow Generator
Design ToolsVisual box-shadow builder with CSS output
FreePrivateInstant
Similar tools you may like
History
All history →CSS Box Shadow Generator — at a glance
Design the perfect shadow for cards and buttons, then copy the CSS in one click.
Y: 10px
Blur: 30px
Opacity: 0.2
Run
box-shadow: 0 10px 30px …
How to use it — step by step
Nothing to paste — adjust the values and generate.
1
Choose options
Pick the mode and options that fit what you need.
2
Generate Shadow
Press the button. The result is created instantly on your device.
3
Copy the result
Check the output and press Copy to use it anywhere.
Pro tips
Small things that make the result better.
✦Soft shadows use high blur and low opacity (0.1–0.25).
✦A larger vertical offset makes the element look lifted.
✦Inset creates a pressed-in effect.
Quick facts
5 controlsoffset, blur, spread, color, opacity
Live previewon a card
Insetsupported
Freeno signup
Frequently Asked Questions
What does spread do?+
It grows or shrinks the shadow size before blur is applied.
How do I make a subtle shadow?+
Use blur 20–40px, no spread, and opacity around 0.1–0.2.
Can I stack several shadows?+
In CSS yes — separate them with commas. Generate each and combine them.
Is my data safe?+
Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.
More Free Tools
Guides you might like
All guides →Color ConverterHEX, RGB and HSL: three ways to write the same colour, and which to usePX to REM Converterpx vs rem: why your font sizes should be allowed to scaleAspect Ratio Calculator16:9, 4:3, 1:1: aspect ratios without cropping surprisesColor Contrast CheckerIs your text readable? The contrast ratio, explained