Free tool
CSS Box Shadow Generator
Dial in the perfect shadow with live controls for offset, blur, spread, color, and inset — then copy the CSS instantly.
X0px
Y10px
Blur25px
Spread-5px
Opacity20%
CSS
box-shadow: 0px 10px 25px -5px rgba(36, 41, 56, 0.20);
FAQ
What does the spread value do?
Spread grows (positive) or shrinks (negative) the shadow before the blur is applied. A small negative spread with a large blur creates a soft, modern shadow.
What is an inset shadow?
Inset draws the shadow inside the element instead of outside — useful for pressed buttons, inputs, and inner depth.
Now design the whole app.
Bender turns a prompt into a full set of themed mobile screens you can edit, test, and export. Free to start — no credit card.
Try Bender free