This article was written in 2010. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Scalable gradients without the performance issues

This post is outdated

While working on an extreme css3 test- and show case I found out that there are some issues with the new css3 gradients. First of all, the syntax is harder to remember than the xhtml strict doctype but more importantly, since there are tools to generate these gradients, these gradients are a performance issue: scrolling can be sluggish. But still, somehow webdesigners want scalable gradients so I came up with an alternative solution: using a png in combination with background-size.

Sure this technique is not as flexible as the css3 notation, every change to the design of the gradient means firing up a pixel editor, building the new png, saving it, turning it in to a data-uri and copy pasting that code to your stylesheet. But if you’re sure about your gradient this is a fine way to build simple scalable gradients. I’m sure that with some clever slicing and tiling and with the help of multiple backgrounds more complex gradients are possible.

Now, browser support. This works in all modern browsers but it doesn’t work in older browsers like camino 1.6 and all versions of IE before version 9. If you agree that websites don’t have to look exactly the same in every browser you can easily hide the png for these browsers by setting its background-position-x to something negative and its background-repeat to no-repeat.