Hit 100 pure CSS gradients in one piece today

I was working on a sunset scene and accidentally stacked 100 linear gradients on one div to get the sky right. It rendered fine in Chrome but nearly crashed Firefox, so maybe there's a limit we should all keep in mind. Has anyone else pushed too many gradients and seen it break?

2 comments

2 Comments

michaelcoleman3d ago

That many gradients on one element is just asking for browser trouble, not good practice.

joel2803d ago

Respectfully I gotta push back on this one. Modern browsers handle multiple gradients just fine, even on a single element. I've done some wild stuff with stacked radial gradients for texture effects and it rendered smooth on everything from Chrome to Safari. The real trouble is when people pile on without understanding how they layer (you know, like putting a solid color first and then transparent ones on top). I'd argue it's actually cleaner than loading a separate image or SVG for the same effect. Performance wise the browser just composites them like any other background, so it's not gonna crash anyone's machine. Maybe back in 2015 this was risky but we're way past that now.