The use of gradients is something that I tend to use quite often in designing websites or interfaces for various applications. Web 2.0 has taught us that solid colors tend to make a site look flat, and using gradients creates a subtle but noticeable difference in the appearance of a webpage. CSS3 introduced gradients and as of today, the good news is that most of the major web browsers support css gradients. I’ve found that eliminating images that act simply as gradient fills for backgrounds and converting them to css equivalent gradient styles has drastically reduced the load time of my pages. CSS gradients also provide a much easier way of editing the colors of the gradient, eliminating the process of having to use an image editor and re-publishing the image each time a change is made.
The CSS Gradient Generator is a free online tool which allows you to create your CSS gradients in a user-friendly interface. The CSS Gradient tool also provides the appropriate CSS code needed for the best cross-browser support. I use this tool to create complex, or even simple gradients that I know will work on the major browsers.
Since images do significantly impact the loading speed of your pages, it is worthwhile to consider which of your images are truly needed. Other than content images, I don’t see a need to have any other images than the logo (if you have a complex logo that requires an image), and sprites which house the different icons on your website. If you find that you have backgrounds that contain gradients, or even patterns on top of gradients, consider refactoring your code to implement the functionality of CSS gradients.