CSS Box Shadow Generator

Using the CSS Box Shadow Generator

What each value does

The two offsets move the shadow right and down (negative values move it left and up). Blur softens the edge; a larger blur makes the shadow look further from the surface. Spread grows or shrinks the shadow before it is blurred. Inset puts the shadow inside the element, which makes it look pressed in.

Shadows that look natural

Real shadows are soft and fall downward, because light usually comes from above. Keep the vertical offset larger than the horizontal one, use a low opacity, and add a negative spread on large blurs so the shadow does not spill out on every side. Tinting the shadow with your background colour instead of pure black looks less dirty.

Two layers beat one

The optional second layer adds a tight, faint shadow close to the element underneath the wide soft one. Together they read as an object resting on the page, which a single blurred shadow rarely achieves.

Shadows on dark backgrounds

A black shadow on a near-black page is invisible. On dark designs, show depth with a lighter surface colour or a thin light border instead, and use the shadow only to separate floating elements such as menus and dialogs.

Frequently asked questions