◰Box-Shadow Generator

Shadows look fake for one reason: too dark and too tight.

A real shadow is soft and low in contrast. A large blur at low opacity almost always beats a small blur at high opacity, and the instinct to make the shadow visible is what makes it look pasted on.

The second tell is direction. Light comes from above, so a small positive vertical offset with no horizontal offset reads as natural. A shadow pushed sideways implies a light source from the left, which then contradicts every other shadow on the page.

Layering

The thing that separates a convincing shadow from a flat one: use two or three. A tight, faint one for contact where the element meets the surface, and a wider, softer one for depth. Real objects cast both. It costs nothing extra — box-shadow takes a comma-separated list.

Use alpha, not grey

A semi-transparent black adapts to whatever sits behind it. A solid grey shadow looks correct on white and wrong on every coloured background, and you will not notice until the section gets a background colour six weeks later.

Better still, tint it: a very dark shade of your background hue at low opacity looks more natural than pure black, which tends toward muddy.

Spread

Grows or shrinks the shadow before blurring. Negative spread pulls it in, which is how you get a tight contact shadow under a card without the blur bleeding out sideways.

Shadows versus borders

Borders are clearer, cheaper, and survive high contrast modes better. Shadows imply elevation — so use them where something genuinely floats above the page: a dropdown, a modal, a sticky header. Not on every card as decoration.

The inset keyword draws the shadow inside the element, which is how pressed buttons and recessed fields are made.