The Anatomy of a Good Box Shadow (and Why Most Look Fake)

Most box shadows on the web look wrong. They look like a dark rectangle floating behind a lighter rectangle. They don't look like real shadows. The reason is that developers reach for box-shadow: 0 2px 4px rgba(0,0,0,0.2) and call it done, without understanding the properties that make shadows look natural. Real shadows have specific characteristics. They're softer the farther the surface is from the background. They have a direction that implies a light source. They're rarely pure black. And they often involve multiple layers. Let me break down each of these. Offset implies a light source The first two values in a box-shadow are the horizontal and vertical offsets. These tell the viewer where the light is coming from. A shadow with 0 4px says "light is directly above." A shadow with 4px 4px says "light is coming from the upper-left." Most design systems assume a top-down light source, so the vertical offset is positive (shadow falls downward) and the horizontal offset is zero or very