Question

Has any one, or know someone who has, evaluated the performance of using background-gradients in CSS vs using images?

It is definitely more flexible and more productive to use code but is there a performance downside to using css gradients for buttons, bars, etc?

Here is a sample cross browser CSS gradient:

background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207cca 51%, #7db9e8 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0 ); /* ie */

background: -o-linear-gradient(top, #1E5799 0%,#2989D8 50%,#207cca 51%,#7db9e8 100%); /* opera */

Answer 1

According to an article on the Webkit Wiki, images perform better:

Sometimes it’s tempting to use webkit’s drawing features, like -webkit-gradient, when it’s not actually necessary – maintaining images and dealing with Photoshop and drawing tools can be a hassle. However, using CSS for those tasks moves that hassle from the designer’s computer to the target’s CPU. Gradients, shadows, and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) – otherwise, static images are always faster. On very low-end platforms, it’s even advised to use static images for some of the text if possible.

Source: https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages

Of course, you have to balance that CPU time with the extra time it would take to load the image from the server. Also, for Internet Explorer, filters are extremely slow, especially if you have many on one page.