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.

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:

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:

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

CSS Gradient: Opera

Following line of code for gradient effect supported by Internet Explorer browser.

Let’s have a look into the WebKit gradient:

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

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 *

Most Popular Posts

How to Create a Simple Anti-Spam Captcha

Posted on 5 years ago

Bhumi

Overview of Views in MySQL

Posted on 12 months ago

Bhumi

How to display ADMIN Toolbar in UI

Posted on 6 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 2 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 2 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 3 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 4 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 4 years ago

Bhumi