Cross browser CSS gradient without images

CSS3 gradients aren't new, but because of cross browser incompatibility, they weren't used that much until now. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without image. Below code will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, Opera, and Chrome.

For Firefox 3.6+

background: -moz-linear-gradient(top, #3399cc,  #336699);

For Webkit browsers

background: -webkit-gradient(linear, left top, left bottom, from(#3399cc), to(#336699));

For Opera

background-image: -o-linear-gradient(top, #3399cc, #336699);

For Internet Explorer

/* IE10 */
background-image: -ms-linear-gradient(top, #3399cc, #336699);


/* Remaining IE browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3399cc', endColorstr='#336699'); 

Combine above three lines of code and the result is a cross-browser gradient box.

Linear Gradient(Top -> Bottom)

background: #336699; /* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#3399cc), to(#336699));
background: -moz-linear-gradient(top,  #3399cc,  #336699);
background-image: -o-linear-gradient(top, #3399cc, #336699);
background-image: -ms-linear-gradient(top, #3399cc, #336699);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#3399cc', endColorstr='#336699');

Note: I have added a background rule at the very top in case the user is using a browser that doesn't support the feature.

Internet Explorer Limitations:

Internet Explorer gradient filter doesn't support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.

Radial gradient

background: #336699; /* for non-css3 browsers */
/* IE10 */ 
background-image: -ms-radial-gradient(center, circle contain, #3399CC 0%, #336699 100%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center, circle contain, #3399CC 0%, #336699 100%);

/* Opera */ 
background-image: -o-radial-gradient(center, circle contain, #3399CC 0%, #336699 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center center, 0, center center, 143, color-stop(0, #3399CC), color-stop(1, #336699));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center, circle contain, #3399CC 0%, #336699 100%);

/* Proposed W3C Markup */ 
background-image: radial-gradient(center, circle contain, #3399CC 0%, #336699 100%);

You can find out more about gradient here.