CSS Box Shadow Generator

What makes a shadow look real

The mistake in most hand written shadows is that they are too dark and too tight. Real shadows are soft and low contrast, because light in the real world scatters. A shadow with a generous blur, a small vertical offset and an opacity around ten to twenty percent reads as depth. A hard black shadow at full opacity reads as a mistake, which is why so many first attempts look wrong without it being obvious why.

The four values

• Horizontal offset: usually zero, because light generally comes from above.
• Vertical offset: a small positive number, since objects cast downward.
• Blur: the most important value. Larger blur means the object appears further from the surface.
• Spread: grows or shrinks the shadow before blurring. Often best left at zero.

Layering and performance

A single shadow can look flat, and stacking two or three with different blurs produces something far more convincing: a tight one for the contact point and a wide soft one for ambient depth. That is how most modern design systems build elevation. Be aware that large blurs are relatively expensive for the browser to paint, so applying a heavy shadow to something that animates constantly is worth testing on a slower device.