- About us
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);
For Firefox and Safari
Internet Explorer Limitations
background: #00ff00; /* for non-css3 browsers */
/* For WebKit (Safari, Google Chrome etc) */
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.
CSS, CSS3, Gradients