What CSS is good at
An animated background css rule runs on the compositor, costs no JavaScript, needs no canvas, and works everywhere. Moving a gradient's position, cycling a background-color, sliding a repeating pattern under a mask — all of that belongs in the stylesheet, and reaching for a GPU pipeline to do it would be a mistake.
Three places it runs out
Banding. Eight bits per channel across a wide screen gives fewer steps than pixels, so a stretched ramp arrives in stripes. The loop. A keyframe cycle is exactly as long as you wrote it, and the eye finds the seam faster than anyone expects. Interaction. A stylesheet cannot sample a pointer position per pixel, so anything that reacts has to be scripted anyway.
Same job, different machine
A shader is a formula evaluated at every pixel, every frame, at the exact resolution of the element it fills. There is no ramp to quantise, no cycle to repeat, and the pointer is one more uniform. It costs a WebGPU context and a component where the CSS cost two declarations — worth it for a hero, rarely worth it for a button.
