CSS gradients work in IE based browsers, Webkit (chrome, Apple eg Safarie, Ipod, Iphone), and Mozilla (Firefox) … however they do require different style tags. (see below).
When compared to images: CSS gradients give a little bit of performance increase. An image used for a background gradient is normally very small around 5,000 bytes. Unless there are over 10 gradients being used these images are not going to make much of an impact. These images are downloaded using the same connection that downloaded the HTML so we are only talking about bandwidth savings when the pages are designed correctly.
Animation is a game changer. With jQuery these divides can be animated and the background color itself can be changed / animated.
HTML5 SVG blows away jQuery in its ability to animate graphics … giving CSS gradients a short window of opportunity. SVG is a graphics language with more years in the making than jQuery.
Here is an example of the CSS markup for gradients
background: -webkit-gradient(linear, left top, left bottom, from(#008), to(#fff));
background: -moz-linear-gradient(top, #008, #fff);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#000080, endColorstr=#FFFFFF)”;