Tune a CSS box shadow
Offset, blur, spread, color, and inset each change a different thing. See what each value does on a live card.
Tools used in this guide
The job
A flat card needs lift, or a modal needs a soft drop. Rather than guessing values in the stylesheet, move the sliders and copy the finished declaration.
What each value does
Offset X/Y move the shadow relative to the box — positive Y drops it downward, which reads as “raised”. Blur feathers the edge; zero gives a hard-edged duplicate of the box. Spread grows the shadow in every direction before blurring, so small positive spread keeps shadows visible even with big blur.
Color plus opacity beats pure black: a dark tint of the page’s text color (or a warm gray) looks more natural than rgba(0,0,0).
Inset and stacking
inset draws the shadow inside the box — useful for pressed or sunken looks. This tool emits one layer; production UI often stacks two shadows (a small tight one + a large soft one) separated by a comma.