Box shadow generator

How to read the box-shadow syntax

The values always come in the same order: horizontal offset, vertical offset, blur radius, spread radius and color. The offsets move the shadow relative to the element, the blur softens its edge, and the spread grows the shadow (or shrinks it, with negative values) before the blur is applied. Adding the inset keyword flips the shadow to the inside of the box, handy for "sunken" effects on inputs and pressed buttons.

Tips for a realistic shadow

Convincing shadows are mostly transparent: keep the opacity between 10% and 30% and increase the blur instead of darkening the color. Keep the Y offset larger than the X offset, since in the real world light usually comes from above. For extra depth, stack multiple shadows separated by commas: a small, crisp one close to the element plus a large, soft one further away.

A shadow tells you the height

In layered design a shadow is not decoration: it says how far an element is lifted off the page. A resting card has a small tight shadow, a menu opened above everything has a large diffuse one, and the difference between the two is what makes clear what sits on top of what.

That is why an interface's shadows should be chosen together, as a scale: two or three fixed levels (resting, raised, in front) always used identically. A different shadow on every element makes a page look untidy even when each individual shadow is beautiful.

Two shadows are better than one

Convincing shadows are nearly always two stacked: a tight dark one just under the object, defining its contact, and a wide very pale one spreading around it. That is how real light behaves, with a sharp shadow close by and a diffuse penumbra further out.

The typical mistake is one very dark shadow, which makes the object look glued onto a grey background. The opacities that work sit between 6 and 20%: it looks like almost nothing on the designer's screen, and that is exactly the point.

The colour of a shadow is not black

A pure black shadow kills the colours beneath it and looks dirty on a coloured background. A realistic shadow takes the hue of the background, darker and more saturated: on a pale blue page, a very dark blue instead of black changes the result more than any adjustment of the blur radius.

It is also worth remembering that box-shadow does not affect layout: the shadow leaves the box without pushing anything, and it can be clipped by a container with hidden overflow. If a shadow disappears for no reason, that is nearly always why.

Nearby tools

To round the corners of the same element there is Border-radius generator and for the background CSS gradient generator. The shadow colour is picked with Colour picker.