How CSS Box-Shadows Work Under the Hood and Why They Hurt Performance

Modern user interfaces simulate visual depth using CSS box-shadows, which appear simple to write but trigger complex rendering operations inside the browser. Browser engines like Chromium's Blink approximate soft shadow edges using a triple box blur algorithm, which is a computationally cheaper stand-in for a true Gaussian blur. Rendering a shadow involves rasterizing the element, expanding an alpha mask, running blur convolutions, and compositing the result — all of which are expensive steps in the browser's paint pipeline. When shadows are animated, such as on hover, the browser must repeat this entire process on the main thread for every frame, often causing visible frame drops on mobile or low-end devices. Developers can optimize shadow animations by leveraging GPU compositing techniques to offload this work from the CPU.