Why does my shadow look fake?

Usually too dark, too sharp, or offset sideways. Real shadows are soft, cast downward and much fainter than instinct suggests. Try black at ten per cent with a blur two or three times the offset.

It grows or shrinks the shadow before blurring. A negative spread with a large blur gives a tight, diffuse shadow that is difficult to produce any other way, and it is a staple of subtle elevation scales.

Can one element have several shadows?

Yes — comma-separate them, and the first is painted on top. Layering a tight contact shadow with a wider ambient one is what makes an element look genuinely raised rather than stuck on.

What is the inset keyword for?

It draws the shadow inside the element's border box rather than outside it, which produces pressed buttons, recessed panels and inner glows.

Box Shadow Generator

Dial in a CSS shadow and copy the rule.

Everything runs inside your browser. Your files never leave your device.

Result

The result appears here as you type.

Ask about Box Shadow Generator

Questions about what this tool does, which option to pick, or what it can and cannot handle.

The question you type here is sent to an AI provider to be answered — your files and whatever you put in the tool above are not, and the assistant cannot see them. Answers are generated and can be wrong. The tool itself is not guessing: it runs deterministic code on your device.

About the Box Shadow Generator

A CSS box-shadow takes five values — horizontal offset, vertical offset, blur radius, spread, and colour — and the difference between a shadow that reads as depth and one that reads as a smudge is entirely in how those five are chosen. This is a visual way to choose them.

Adjust the sliders, watch the preview, and copy the resulting CSS. Multiple shadows can be layered on one element, which is where the interesting results live.

The single most useful principle is that real shadows are soft, offset downward and barely visible. Light comes from above, so the vertical offset should be positive and the horizontal offset close to zero. The blur should be generous — usually larger than the offset — and the colour should be a low-opacity black rather than grey. Grey shadows look dead because they do not take on the colour of what is underneath them; a black at ten or fifteen per cent opacity does.

Layering is what separates a convincing elevation from a flat drop shadow. A single large blur looks like a sticker. Two or three shadows at different offsets and blurs — a tight one for the contact edge, a wider one for the ambient cast — is how every well-made design system builds its elevation scale, and it is why those shadows look like the object is above the page rather than pasted onto it.

Two things worth knowing. The inset keyword draws the shadow inside the element instead, which is how pressed buttons and recessed wells are made. And spread grows or shrinks the shadow before it is blurred, so a negative spread with a large blur produces a tight, subtle shadow that is very hard to achieve any other way.

How to use it

1Set a small positive vertical offset and leave the horizontal at zero — light comes from above.
2Raise the blur until the edge is soft, usually further than feels necessary.
3Use black at low opacity rather than a grey, so the shadow picks up whatever is beneath it.
4Add a second, tighter shadow for the contact edge, then copy the combined CSS.

Questions

Why does my shadow look fake?: Usually too dark, too sharp, or offset sideways. Real shadows are soft, cast downward and much fainter than instinct suggests. Try black at ten per cent with a blur two or three times the offset.
What does spread do?: It grows or shrinks the shadow before blurring. A negative spread with a large blur gives a tight, diffuse shadow that is difficult to produce any other way, and it is a staple of subtle elevation scales.
Can one element have several shadows?: Yes — comma-separate them, and the first is painted on top. Layering a tight contact shadow with a wider ambient one is what makes an element look genuinely raised rather than stuck on.
What is the inset keyword for?: It draws the shadow inside the element's border box rather than outside it, which produces pressed buttons, recessed panels and inner glows.