CSS Box Shadow Generator

Design perfect box shadows with live preview — adjust, layer, and copy the CSS

box-shadow: 5px 5px 15px 0px rgba(139, 92, 246, 0.4);

Frequently Asked Questions

What is CSS box-shadow?
The box-shadow property adds shadow effects around an element. It takes horizontal/vertical offset, blur radius, spread radius, color, and an optional inset keyword.
Can I add multiple shadows?
Yes. Click "Add Layer" to stack multiple shadows. Each layer has its own settings and you can remove individual layers.
What does spread do?
Spread makes the shadow larger (positive) or smaller (negative) than the element. A spread of 0 means the shadow matches the element's size.
What does inset mean?
Inset changes the shadow from outer to inner, creating a sunken effect inside the element instead of a shadow behind it.