Most of us reading this have encountered an absurd filter: blur(); value like 300px or 400px, and we all know it kills the CPU performance. Let's see why and how we can fix it.
Why is filter:blur(300px) Bad
Our latest gen CPUs have around 16 cores more or less. Now take this circle for example with a blur value of exactly 300px radius, You see how it fades into the black background as far it goes and each pixel fades a little by little, now all of this is handled by your CPU on the web. If it was your GPU it would have been easy for it (an RTX 4090 has 16,384 CUDA cores VS your CPU with 16 cores). Image handling PI*300*300 pixel with only 16 cores one at a time, Slow right?
How to solve the problem
Solution 1: PNG
We can use a PNG of the blurred-out circle, but that has its problems, It has waves and a higher size, the more you optimize it for size the more waves you see.
You can optimize it to the tiniest with lots of solid waves and then add blur on that image, where you will only need to add around 5–10px blur radius instead of 300px.
Solution 2: Let the GPU handle it.
You can add transform: translateZ(0px) to let the browser know to shift the load to GPU and reduce the load on the CPU.
and Here's is how to transform are better when animating than using left, right, top, bottom
Conclusion
Letting the GPU handle the blur calculation is a better solution than going with a PNG but if the blur is quite small you can get away with either of the solutions.