CSS3 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.
With this post I will show you how to use CSS gradients for some major browsers: Firefox, Safari, Chrome and IE (surprise!).
But first… why use CSS3 gradients?
If CSS can help you to get rid of extra images, then you should consider this as a good solution for your design, because:
- You will get fewer HTTP requests
- CSS gradients are scalable, meaning less headaches for you
- CSS3 it’s so cool :)
IE trident gradient example
I would suggest you to use these filters only in conditional CSS files, otherwise these filters will affect your files performance.
Cross-browser CSS linear gradient
But, lets see how it works. Use the following lines of code from above together and you will get a cross-browser gradient box.
CSS3 radial gradient
IE gradient filters doesn’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 end.
But lets see how you can define a CSS3 radial gradient for Firefox, Safari and Chrome.
Although CSS gradients are great, not all browsers support it (yet). So, you shouldn’t totally rely on CSS gradient when coding your web design and you should always use a fallback for it.
If you have anything to add, feel free to do it in the comments below. Let me know your opinion.
Since I wrote this article, Webkit gradient syntax was updated, Internet Explorer 10 Test Drive was launched (glad to see CSS3 gradients are supported) and Opera 11 also added CSS3 gradients to its features.
So here is the latest CSS3 gradients syntax:
Quick tip for you
To stay updated with latest CSS3 gradients syntax, check this wonderful CSS3 resource.
PNG8 alpha transparency using Adobe Fireworks
Google Font API and Typekit solutions VS @font-face