The Physics of Multi-Layer Elevation
Replicating inverse-square light dissipation in CSS.
When building depth systems in modern UI architectures, a single CSS box-shadow invariably looks rigid and artificial. This occurs because the browser engine renders the blur radius via a simple Gaussian blur matrix with linear falloff.
In physical environments, light dissipation adheres to complex optics. A shadow cast by an elevated object contains two distinct zones: the Umbra (the sharp, intensely dark area immediately adjacent to the object where light is entirely blocked) and the Penumbra (the widely diffused, lower-opacity spread extending outward).
To algorithmically simulate this organic dispersion within the constraints of CSS, developers must composite multiple comma-separated shadow layers. By stacking a tight, high-opacity shadow (representing the umbra) alongside progressively larger, softer, lower-opacity shadows (representing the penumbra), we force the rendering engine to calculate a non-linear gradient falloff, drastically increasing the photorealism of the UI elevation scale.