Modern user interfaces use elevation and shadows to establish a visual hierarchy of layers. On a flat 2D screen, this depth is an optical illusion created by simulating light source projections and shadow scattering.
While generating a drop shadow in CSS is as simple as typing box-shadow, under the hood, the browser's rendering engine executes complex coordinate vector translations and expensive pixel convolution passes.
Let's break down the mathematics behind CSS depth calculations, the performance costs of rasterizing shadows, and how to optimize shadow animations for hardware acceleration.
1. The Coordinate Calculus of a Drop Shadow
A standard CSS box-shadow property is declared as:
