How Far Can You Push CSS3 Gradients?

I’m a passionate, and I think rational proponent of relying on CSS3 whenever you need gradients. Let’s break that into two issues: CSS3 for when you do need gradients, and the role of gradients in contemporary Web design…

The Fading of Gradients

Correct me if I’m wrong, students of design trends, but gradients are fading… in their role in Web design. Like many features, there was a phase designers went through of using them, because you can. But in the overall battle against chaos and cacophony, they’ve faded (OK, I’ve used that one too many times) in import. As one of my designer friends constantly reminds me, when you’re designing an art gallery, you want the artwork, not the gallery, to be the focus of attention.

But they do have a role. Especially subtle, monochromatic gradients. They add a bit of energy, motion and dynamism to pages without pulling the users attention away from key elements.

Use CSS3 when you do need gradients

Whenever possible, use CSS3 gradients instead of tiled images for gradient background. In earlier eras, we created gradient images in Illustrator (or other illustration tools) like this:

That PNG file (above) is the same subtle blue (#A7C7DC) to blue (#85b2d3) gradient I have behind this box.

But this box has no PNG (except for the one above). It’s all CSS3, generated in the Ultimate CSS Gradient Generator. That CSS code uses almost no download bandwidth. I can extend it miles without adding to that.


So, does this mean you never use PNGs or other image files as tiled backgrounds. No it doesn’t. The background I’m using on this page, for example, is a tiled JPEG. I tried to wrangle CSS3 into this, but if it was possible, it wasn’t worth it.

And so, a simple, basic, tiling (repeating) JPEG worked best here. has a handy reference with syntax for defining such a repeated tiled image background here.

Conclusion: There is a place for gradient and tiled image backgrounds – even if that role has been dialed down in contemporary Web design. And… there is a place for repeated tiled images when you can’t pull this off with CSS3. But whenever you can, CSS3 is the most efficient way to create gradients. What’s your experience? The comments section is open …


Print Friendly, PDF & Email