CSS box-shadow generator

Four lengths, one effect

box-shadow is the workhorse of UI depth — cards, modals, dropdowns and focus rings all lean on it. The syntax is offset-x offset-y blur spread color. Offsets move the shadow (positive x/y push it right and down, negatives pull it up and left). Blur softens the edge — zero is a hard silhouette, larger values feather it out. Spread grows the shadow before the blur is applied, or shrinks it when negative — the one parameter text-shadow lacks. A negative spread paired with a downward offset gives the "lifted just off the page" look, where the cast is narrower than the element itself.

inset and stacking shadows

The inset keyword flips the shadow inside the box, which is how pressed buttons, inset form fields and neumorphic surfaces are built. You can list several shadows on one property, comma-separated, and they paint back-to-front (the first one sits on top). Real elevation systems exploit this: a tight, dark, low-blur shadow for the contact edge plus a wide, soft, lighter one for the ambient cast reads far more convincingly than any single shadow. Stacking an inset light shadow over an outset dark one is the classic two-tone bevel.

Making shadows look real (and stay fast)

Believable shadows are low-alpha and slightly downward, mimicking a light source above — something like rgba(0,0,0,0.12), never solid black. Tinting the shadow toward the background or the element's own hue beats flat grey. For performance, prefer box-shadow over wrapping elements in blurred images, but animate it sparingly: a large blur repaints a wide area, so for hover lifts it's cheaper to cross-fade between two predefined shadows, or animate transform, than to tween the blur radius live.