CSS3 Gradients

But first… why use CSS3 gradients?

If CSS can help you to get rid of extra images, and replacing them with pure code for your browser to interpret without loading any additional external files, then you should consider this as a good solution for your design, because:

• You will get fewer HTTP requests, meaning less bandwidth is used and faster load-times (wich can also drastically improve your Rank on search engines)
• CSS gradients are scalable, meaning less headaches for you

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>]*)

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.