How do we achieve gradients through CSS? well, right now – the syntax is different for each browser . . . so why go through the hassle, if we can just specify a background image . . . right? Well, if the gradient isn’t all that essential and you can accept a solid background color as a fallback (for older browsers) – then you can save an http request and faster page load minus the extra background image.
So how is it done?
div {
background-color: #1a82f7; /* fallback color */
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7); /* for mozilla browsers */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); /* for webkit browsers */
background-image:filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";
/* for IE */
}
Mozilla
Here’s the official documentation.
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
or
-moz-linear-gradient (-45deg,red,blue);
For radial gradients, it’s -moz-radial-gradient
WebKit (Safari,Chrome)
Documentation
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
or
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
IE
Documentation
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";
