Build a CSS box-shadow visually
Build a CSS box-shadow (or multiple layered shadows) visually, with live preview and copyable CSS.
Offset X/Y move the shadow, blur softens its edge, spread grows or shrinks it before blurring.
Most shadows look best at low opacity. The color is converted to rgba() automatically.
Inset draws the shadow inside the element's border instead of outside it.
Frequently asked
What's the difference between blur and spread?
Blur softens the shadow's edge into a gradient. Higher values make it fade out more gradually. Spread grows or shrinks the shadow's shape itself before blur is applied, independent of the element's own size.
Why does the tool convert my color to rgba()?
box-shadow needs an alpha channel to look natural. A fully opaque shadow reads as a hard block. Converting your picked color to rgba() lets the opacity slider control transparency directly.
What does inset do?
A normal shadow is cast outside the element, like light falling on it. Inset flips that. The shadow is drawn inside the element's edges, which is useful for pressed/recessed-looking UI.
Can I stack multiple shadows?
This tool generates one shadow layer at a time. To stack multiple, generate each layer separately and combine them in your CSS with a comma between box-shadow values.