One of the most popular things you see in websites these days is gradients. Gradients are an easy way to add depth and style without being too flashy. While the default method of achieving a gradient has been to create an image, this can easily add up and hurt your page load times. One solution is to use CSS gradients. There’s several different free online tools that allow you to generate gradients:
- Ultimate CSS Gradient Generator by ColorZilla.com* – comprehensive linear gradient tool; lots of impressive preset gradients; fully cross-browser compatible
- CSS3 Gradient Generator – simple quick CSS3 gradient generator
- Quick CSS3 Gradient Generator – examples for making linear and radial gradients
- CSS-Tricks Button Maker – simple CSS3 gradient button maker
- CSS Button Generator* – cross-browser compatible button generator
*- personal favorites
One of the important things to remember with using CSS styles for round corners and gradients is that not all browsers support these features. Opinions for how to handle this vary from just using images for all gradients, to using CSS for contemporary browsers and images for older browsers, to just using CSS for contemporary browsers and letting older browsers interpret the styles more plainly. This goes back to the concept of Progressive Enhancement vs Graceful Degradation.
