The CSS gradient was hardly used because of incompatibility with well-known browsers.But now almost all well-known browsers are supporting a gradient so we can go through a gradient effect rather than going to the image.
In this article, I am going to explain how to use the CSS gradient with supported by the well-known browsers like IE, Firefox, Safari, and Chrome.
Also Read: LESS CSS – Getting Started
CSS Gradient: Mozilla
Firefox is supporting a gradient with version 3.6.The following line of code is used for the gradient effect in Mozilla.
1 2 3 | background: -moz-linear-gradient(top, #73a23a 0%, #358e3a 100%); /* FF3.6+ */ |
Here, The -moz-linear-gradient property can have first parameter which is the starting position of the gradient.
For Vertical Position: top, center, bottom
For Horizontal Position: left, center, right
CSS Gradient: Webkit
The Webkit gradient is supporting in Safari and Chrome.
Let’s have a look into the WebKit gradient:
1 2 3 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#73a23a), color-stop(100%,#358e3a)); /* Chrome,Safari4+ */ |
The Webkit gradient is almost same like Mozilla.
Parameter Explanation:
First parameter is linear (rectangular) or radial (circular).
Next two parameters are the positions: left top, right top, left bottom, right bottom or x/y coordinates.
Next is the color stops which are almost same like Mozilla gradient just stop must be in a color-stop(). First color-stop() is for the begin
color and second color-stop() is for end color shade.
CSS Gradient :Internet Explorer
Following line of code for gradient effect supported by Internet Explorer browser.
Let’s have a look into the WebKit gradient:
1 2 3 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73a23a', endColorstr='#358e3a',GradientType=0 ); /* IE6-9 */ |
In older version of Internet explorer, Filter is used for getting a gradient type effect.
GradientType=0 is to rotate the gradient so it is vertical instead of horizontal.
Internet explorer 10 supports gradient effect as follows
1 2 3 | background: -ms-linear-gradient(top, #73a23a 0%,#358e3a 100%); /* IE10+ */ |
CSS Gradient: Opera
Following line of code for gradient effect supported by Internet Explorer browser.
Let’s have a look into the WebKit gradient:
1 2 3 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73a23a', endColorstr='#358e3a',GradientType=0 ); /* IE6-9 */ |
In older version of Internet explorer, Filter is used for getting a gradient type effect.
GradientType=0 is to rotate the gradient so it is vertical instead of horizontal.
Internet explorer 10 supports gradient effect as follows
1 2 3 | background: -ms-linear-gradient(top, #73a23a 0%,#358e3a 100%); /* IE10+ */ |
That’s it.
DEMO
I hope this post will help you. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.
