CSS Box Shadow Generator
Craft the perfect box-shadow with live preview, then copy the CSS in one click.
X offset (0px)
Y offset (10px)
Blur (25px)
Spread (-5px)
Opacity (20%)
Colour
box-shadow: 0px 10px 25px -5px rgba(16, 34, 46, 0.20);🔒 Generated on your device
How to design a shadow
- Set the offset. X and Y move the shadow.
- Soften it. Adjust blur, spread and opacity.
- Copy the CSS. Paste it into your stylesheet.
Frequently asked questions
What does each control do?
X and Y set the shadow's offset, blur softens the edge, spread grows or shrinks it, and colour and opacity set its look. Inset places the shadow inside the element.
How do I use the CSS?
Copy the code and paste it into your element's box-shadow property.
Can I make a soft, modern shadow?
Yes — a small Y offset, larger blur, slightly negative spread and low opacity gives the soft, layered look used in modern UI design.
Is anything uploaded?
No. Everything is generated in your browser.