CSS Box Shadow Generator
Create inset or outer CSS box shadows with adjustable offsets, blur, spread, color and opacity, plus a live preview.
Set your values
Adjust the values, then calculate your result.
How to use CSS Box Shadow Generator
- Adjust offsets, blur and spread for the desired elevation.
- Choose a shadow color, opacity and optional inset mode.
- Generate the CSS, inspect it against the preview surface, and copy the declaration.
Offsets, blur and spread solve different problems
Horizontal and vertical offsets move the shadow. Blur softens its edges; spread grows or shrinks the underlying shape before blur. Negative spread can make a shadow feel lighter without reducing its color opacity. Inset draws the shadow inside the box rather than outside it.
Test shadows in the real component
A shadow that looks subtle on a white preview may disappear on a dark surface. Inspect both themes and avoid using shadow alone to communicate a control boundary or focus state. This tool generates one shadow layer; combine several comma-separated layers manually when your design needs more complex elevation.
Can blur be negative?
No. CSS requires a nonnegative blur radius. Offsets and spread may be negative.
Is input uploaded?
Processing takes place in your browser. This tool does not send your input or selected files to a conversion API.