How box-shadow works
The CSS box-shadow property adds shadows to elements, following the syntax box-shadow: X Y blur spread color;. By adjusting each parameter visually, this tool generates the exact code for the effect you want.
What each parameter does
| Parameter | Function |
|---|---|
| X offset | Moves the shadow right (positive) or left (negative) |
| Y offset | Moves the shadow down (positive) or up (negative) |
| Blur | The larger it is, the softer and more spread out the shadow edge becomes |
| Spread | Increases or decreases the shadow size in every direction |
| Inset | When checked, the shadow sits inside the element instead of outside it |
Design tip
Soft shadows with a high blur and a low-opacity color (like rgba(0,0,0,0.15)) tend to look more modern than hard, dark shadows, and are widely used on cards and buttons in current interfaces.
Frequently asked questions
What does the "spread" parameter do?
It controls the shadow size in every direction, independent of blur — positive values expand the shadow, negative values shrink it.
What's the difference between a normal and an inset shadow?
A normal shadow appears outside the element, as if it were floating; an inset shadow appears inside it, creating a depth or engraved effect.
Can I use colors with transparency?
Yes, use the rgba(r, g, b, alpha) format, like rgba(0,0,0,0.25), to control the shadow opacity.
Can an element have more than one shadow?
Yes — in CSS you can separate multiple box-shadow definitions with commas, though this tool generates one shadow at a time.