The Physics of UI Depth: CSS Box-Shadow Vectors and GPU Compositing Pipelines

Short summary

A technical breakdown of how CSS box-shadow works under the hood, covering the mathematics of shadow projection, browser rendering pipeline costs, and GPU compositing. The article explains why animating box-shadow directly causes repaints and frame drops, and offers a technique of painting two static layers and transitioning opacity to achieve smooth 60fps animations on the GPU compositor thread.

• •CSS box-shadow triggers expensive paint-stage convolution passes in the browser rendering pipeline
• •Directly animating box-shadow forces re-rasterization every frame, causing performance issues
• •Solution: paint two static shadow layers and transition opacity on the GPU compositor thread

Generated with AI, which can make mistakes.