CSS gradients aren’t something new, but because of cross-browser incompatibility, they weren’t used that much until now.
However, you should know that they are available to use in Safari, Chrome (Webkit) and Mozilla Firefox (from 3.6) browsers. In this article, you will learn how to use CSS gradients, available in some of the major browsers: Firefox, Safari, Chrome and IE (surprise!).
Why use CSS gradients?
You will get fewer HTTP requests to the server
CSS gradients are scalable, without performance issues
CSS gradients are easy to update and to debug
IE trident gradient example
I would suggest you to use these filters only in conditional CSS files, otherwise, these filters will affect the overall performance.
Cross-browser CSS linear gradient
But, let’s see how it works. Use the following lines of code from above together and you will get a cross-browser gradient box.
IE gradient filters don’t support color-stop, gradient angle, and radial gradient. This means you can only specify just horizontal and vertical linear gradients (as above) with two colors, one for start and one for the end.
But lets see how you can define a CSS radial gradient for Firefox, Safari and Chrome.
Since I wrote this article, Webkit gradient syntax was updated, Internet Explorer 10 Test Drive was launched (glad to see CSS gradients are supported) and Opera 11 also added CSS gradients to its features.