CSS3 gradients – quick tutorial

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 4+) 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

• Mozilla gradients
• Webkit gradients
• IE gradients filters

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.

Posted by: Dhiraj kumar

You can support this website by sharing. Thank you!