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 :)
Firefox syntax
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) -moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )
Webkit syntax
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
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.
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#6191bf, endColorstr=#cde6f9); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#6191bf, endColorstr=#cde6f9)"; /* IE8 */
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.
background: #6191bf; /* Fallback background color for non supported browsers */ background-image: -moz-linear-gradient(top, #81a8cb, #cde6f9); /* Firefox 3.6 */ background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cde6f9),color-stop(1, #81a8cb)); /* Safari & Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#cde6f9'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#cde6f9')"; /* IE8 */
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.
background: #6191bf; /* Fallback background color for non supported browsers */ background-image: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #6191bf); background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#cde6f9), to(#6191bf));
Conclusion
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.
Further reading
Update
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:
background-color: #6191bf; /* Fallback background color for non supported browsers */ background-image: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#cde6f9)); background-image: -webkit-linear-gradient(top, #81a8cb, #cde6f9); background-image: -moz-linear-gradient(top, #81a8cb, #cde6f9); background-image: -ms-linear-gradient(top, #81a8cb, #cde6f9); background-image: -o-linear-gradient(top, #81a8cb, #cde6f9); background-image: linear-gradient(top, #81a8cb, #cde6f9); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#81a8cb', EndColorStr='#cde6f9'); /* IE6–IE9 */
Quick tip for you
To stay updated with latest CSS3 gradients syntax, check this wonderful CSS3 resource.
If you enjoyed this article, you might also like:
Im super excited to start implementing CSS3. Thanks for the post.
Nice quick tutorial.. thanks
Elliott
Thanks for reading guys!
Great article! One of the bests i’ve read! Tks for share! But I’m concerned about performance when using it. Gradients seems to be math calcs for browsers as rounded corners and shadows are also. Have you noticed if some browser (specially Firefox) has lost performance when using many of these gradients?
@ed1nh0 you should be concerned about performance only if you’ll use IE CSS expressions and filters. I’m not aware of any performance loss for modern browsers when using CSS3 gradients.
hi guys,
do you know how to implement it for whole body? normally it shows just a narrow strip. I’d like to stretch it to default width and hight of the screen.
Is it any easy way or do I have to create div width 100% dimensions?
I got the answer, sorry for spamming. The rule needs to be applied to html tag and its height set-up to 100% :
html {
background:#6191bf;
background-image: -moz-linear-gradient(top, #81a8cb, #cde6f9); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cde6f9),color-stop(1, #81a8cb)); /* Safari & Chrome */
height: 100%;
}
Indeed, to use it that way you have to set 100% height for the html selector.
just demo..
Cool! I’ll use it in my next project.
This is the best simple explanation of CSS3 gradients I’ve seen. You cover the basics, and explain well how the properties work.
Many thanks!
Thanks for reading it Derek and nice to hear you found it helpful!
Hi Red,
Thank you for this precious contribution. I’ve applied your linear gradient. It works just fine on FF, but on IE8 all the text and images becomes light gray and not visible
Sammad, please check your syntax for IE8.
You should not encounter any problems with this.
Thank you for replaying Red,
In IE8 It’s like the box content (text + images) has been covered by the applied gradient. So all the content becomes too pale and not clear.
Here is my syntax:
#test{
/*background: #6191bf; Fallback background color for non supported browsers */
background-image: -moz-linear-gradient(top, #81a8cb, #cde6f9); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cde6f9),color-stop(1, #81a8cb)); /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#81a8cb’, endColorstr=’#cde6f9′); /* IE6 & IE7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#81a8cb’, endColorstr=’#cde6f9′)”; /* IE8 */
}
I’ve olny made a copy-past of the gradient part of your code. I would send you a screenshot if I could
Sammad, please try this:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#81a8cb', EndColorStr='#cde6f9');Apparently, an an error sneaked in… I will update soon the gradients syntax.
Thanks for letting me know and I also hope the line above will solve your problem.
Hi Red,
it didn’t work. is there a way to use z-index to enforce bring div content to the front so it will be more visible?
Regards,
Samad
Sammad, CSS gradients have nothing to do with content visibility. Apparently, it seems you have other problems than this…
dont work in opera :((
Christle, Opera 11.10+ supports CSS3 gradients.
Thanks for your feedback, I just updated accordingly also the demo.
Nice tutorial..
Thanks,
Shantibhushan
bad review…..
Great post. Thanks for the info. Love the cut n’ paste. Really saved me a lot of time.
think u very much
For IE9 you have the option of using a url reference to an SVG defined gradient that has the advantage of not bleeding into rounded corners. There are many limited generators available on the net but if you’d like to generate the SVG code for any possible CSS linear or radial gradient, there’s an app at http://www.visualcsstools.com that will do it for you. There’s a free and a paid for version.