Creating CSS Gradient

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( || , color-stops)

 /*Safari,Chrome Linear gradients*/

Safari/Chrome : -webkit-gradient(linear, , 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:

Demo: CSS Gradient Box



    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.