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