CSS Box Shadow Generator
Tune offsets, blur, spread and opacity to see the shadow live, then copy ready-to-use box-shadow CSS. Switch between outer and inset in one click.
How to Use
- Decide the direction first
Outer shadows lift a card, inset shadows sink an input. Getting the direction right before tuning numbers saves a lot of wandering.
- Start soft
A common recipe is Y between 2 and 8px, blur at two to three times Y, spread at 0. Once the elevation reads naturally, push or tighten as needed.
- Copy the CSS
Click 'Copy CSS' to take the whole box-shadow line into a rule block. Come back any time to keep nudging the values.
FAQ
How is blur different from spread?
Blur softens the edge into a gradient — larger means fuzzier. Spread grows or shrinks the shadow shape itself without changing edge sharpness, so a negative spread can make the shadow smaller than the element.
Why is 0 printed without a unit?
Zero is the only length in CSS allowed to omit its unit. 0px is legal but redundant, so the tool always emits a bare 0 for cleaner output.
Why enter opacity as a percentage?
rgba's fourth argument is a 0–1 decimal; percentages match intuition better. Enter 12 and the output carries 0.12.
How do I stack multiple shadows?
This tool produces one layer at a time. Copy the outer shadow, then append a second comma-separated value by hand — for instance an outer plus an inset layer in one declaration.