Back to Top

how to use the CSS3 Gradient Effect

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.

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:

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:

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

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:

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

background: -ms-linear-gradient(top, #73a23a 0%,#358e3a 100%); /* IE10+ */

That’s it.

DEMO

View Demo

I hope this post will help you. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

The Readers’ Poll – August 2012

Posted on 6 years ago

Bhumi

How to Import Users in MODx from CSV file

Posted on 6 years ago

Bhumi

How to use HTML5 Constraint Validation

Posted on 4 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 5 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 4 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 4 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 5 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 5 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 5 years ago

Bhumi