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!).

css-gradients

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.

css-linear-gradient

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.

css-radial-gradient

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.

Posted by: Dhiraj kumar

You may also like:

You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLMobile Web TechnologyPhotoshopadvance web technology,angle brackets,browser incompatibility,core code,CSS,CSS 3,CSS 4,CSS framework,css namespaces,css3,css3 box shadow,CSS3 gradients,doctype html,elements,enterprise-it,free open source,graphical user interface,grid,grid system,html and xhtml,html basics,interactive web applications,internet,linear gradient,ms filter,plugin,radial gradient,software,technology,transparent background image,visual transitionCSS3 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...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.