The CSS box-shadow property operates within the CSS box model, adding visual shadow effects to the rectangular box that every HTML element generates. Defined in the CSS Backgrounds and Borders Module Level 3 specification, box-shadow accepts multiple comma-separated shadow values, each specifying horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. Understanding how each parameter works is essential for creating realistic shadow effects that enhance rather than clutter a design.

Shadow rendering follows a specific algorithm defined by the specification. The browser first creates a shadow shape matching the element's border box, including any border-radius curves. The spread radius expands or contracts this shape before blurring is applied. The blur radius then applies a Gaussian blur to the shadow shape, with the blur radius defining the standard deviation of the Gaussian function. A blur radius of 10px creates a shadow that fades from full opacity to transparent over approximately 10 pixels from the edge. The shadow is then offset by the specified horizontal and vertical distances and painted behind the element (or inside it for inset shadows), clipped to ensure it does not appear beneath the element itself.

From a rendering performance perspective, box shadows are composited by the browser's rendering engine and can be GPU-accelerated on modern browsers. However, large blur values or many shadow layers increase the computational cost of rendering. Browsers optimize shadow rendering by using approximation algorithms for large blur radii rather than computing exact Gaussian convolution for every pixel. For animations, changing box-shadow triggers a repaint but not a reflow, making it moderately expensive to animate. A performance-optimized approach for animated shadows uses the opacity property on a pseudo-element that already has the desired shadow applied, as opacity changes are handled entirely on the GPU compositor thread.

Design systems like Google's Material Design use layered shadows to communicate elevation, a concept borrowed from physical interfaces where objects closer to the viewer cast larger, softer shadows. Material Design defines specific elevation levels (1dp, 2dp, 4dp, 8dp, 16dp, 24dp), each corresponding to specific shadow parameters. The key insight is that realistic shadows typically require multiple layers: a key shadow (sharp, directional, simulating a primary light source) combined with an ambient shadow (soft, omnidirectional, simulating environmental light). Neumorphism takes a different approach, combining a light shadow (offset in one direction with a bright color) and a dark shadow (offset in the opposite direction) on a background that matches the element color, creating a soft, embossed or extruded appearance.