Multi-Layer Shadows: Ambient + Directional Light

A single, harsh CSS drop shadow like box-shadow: 0 10px 20px rgba(0,0,0,0.4) looks cheap, muddy, and unnatural. In real life, light bounces off nearby walls and surfaces, creating two simultaneous shadows:

1. The Ambient Shadow: Soft, dispersed, omnidirectional light with zero vertical offset and low opacity.
2. The Key / Directional Shadow: A sharper, downward-offset shadow cast by the primary directional light source.

Professional design systems combine these into multi-layer shadow tokens:

--elevation-card: 
  0 1px 3px rgba(0, 0, 0, 0.05),     /* Ambient shadow */
  0 4px 12px rgba(0, 0, 0, 0.08);    /* Directional key shadow */

Multi-layering produces buttery smooth, realistic depth that elevates the entire aesthetic of your product.