Software Technology Tips

Gradients are smooth transitions between two or more specified colors.

 The CSS gradient feature was introduced by Webkit about two years back, but was not very successful as most popular browers didn't support the feature. But now that is set to change with the arrival of CSS3 which supports gradients, specifically, linear and radial gradients. CSS Gradients are supported in FF3.6+, Safari 2+ and Google Chrome and IE5+.

 Put the four lines of code together and the result is a cross-browser gradient box.

/*Firefox Linear gradients*/

Firefox: -moz-linear-gradient(<point> || <angle>, color-stops)

 /*Safari,Chrome Linear gradients*/

Safari/Chrome : -webkit-gradient(linear, <point>, color-stops)

 IE 5-7: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000', GradientType=0);

IE8: -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr=#FF0000FF, endColorstr=#FFFFFFFF, GradientType=0)";

For Firefox and Safari
The starting point of the gradient is defined by a point and angle depending on the browser being used. If the browser is Firefox it uses an "point and angle" as starting point of the gradient but Safari uses only "point" to apply the gradient. In either case the values can be in pixels as well as percentage(%). The values can also be according to the alignment, such as "left", "center", or "right" for horizontal and "top", "center", or "bottom" for vertical positioning and color-stops are Colors in which the gradient should transition to and from.

Internet Explorer Limitations
 However, the Internet Explorer doesn't support some of these including gradient angle ,radial gradient and stop-color. it can instead create vertical or horizontal gradient from 2 colors using StartClrStr and EndColorStr 


Demo :
By first declaring a background rule allowed by CSS3 gradients, browsers that don't support CSS gradients will default to rule while those that do will use the more efficient CSS version:

<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo: CSS Gradient Box</title>

    body {
         width: 600px;
         text-align: center;
         margin: 100px auto;
    .gradient {
         width: 200px;
         height: 200px;

         background: #00ff00; /* for non-css3 browsers */

          /* For WebKit (Safari, Google Chrome etc) */
         background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
         /* For Mozilla/Gecko (Firefox etc) */
         background: -moz-linear-gradient(top, #00ff00, #000000);
         /* For Internet Explorer 5.5 - 7 */
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ff00, endColorstr=#000000, GradientType=0);
         /* For Internet Explorer 8 */
         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";


         gradient box

Copy the above code in notepad, save it as GradientDemo.html. Open it in Mozila (3.6) or IE (5 above). and see the result by commenting the gradient class.

Related Tags:

CSS, CSS3, Gradients

Author: Tushar Mishra


Let us Connect!

Awards and Achivements

Red Herringcolor DeloitteFast50 DB ZInnov1   Nascome


serf DDM

This site uses cookies. We respect your privacy.copyright (c) Mindfire Solutions 2007-2015. Login