Design CSS box shadows visually and copy clean CSS snippets for layouts.
A CSS box-shadow might seem like a simple visual effect, but underneath it requires the browser to execute a Gaussian blur algorithm.
When you specify a blur radius of 10px, the browser cannot just draw a solid color. It has to take the shadow color, look at every single pixel in a 10px radius, and calculate a weighted average based on a bell curve (the Gaussian function). The further a pixel is from the center, the less weight it gets.
Doing this in real-time on a 4K monitor requires millions of calculations per frame. This is why animating the box-shadow property directly on hover can cause severe lag, jitter, and dropped frames, especially on mobile devices.
Instead of animating the box-shadow directly, modern frontend engineers apply the shadow to a pseudo-element (like ::after) and animate its opacity using the GPU. Fading a pre-blurred box is infinitely faster than asking the CPU to recalculate the Gaussian math on every single frame!
The CSS box-shadow property accepts a comma-separated list of shadows. This is a common technique used to create ultra-smooth, realistic shadows (often called "Layered Shadows" or "Smooth Shadows").
By combining 5 or 6 subtle shadows with varying opacities and offsets, you can simulate realistic ambient light diffusion.
Why is animating a CSS box-shadow's blur radius directly considered bad for performance?
