Free · No sign-up · Runs in your browser
CSS Box Shadow Generator
Design soft, modern box-shadows with a live preview, then copy clean CSS in one click.
Preview
Presets
box-shadow: 0px 10px 30px -5px rgba(26, 26, 46, 0.15);How it works
How to use the Box Shadow Generator
- 1
Start from a preset or drag the sliders to shape the shadow.
- 2
Pick the shadow colour and toggle Inset for an inner shadow.
- 3
Copy the CSS and paste it into your stylesheet.
FAQ
Frequently asked questions
What do the box-shadow values mean?
In order: horizontal offset, vertical offset, blur radius, spread radius and colour. Add the inset keyword to draw the shadow inside the element.
How do I make a soft, modern shadow?
Use a large blur, a small vertical offset, a negative spread and a low opacity (10–20%). Dark navy often looks more natural than pure black.
Do box shadows slow down a website?
Normal shadows are cheap. Very large blurs on many elements, or animating box-shadow, can cost performance — animate transform or opacity instead.
Keep going