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 *

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

Most Popular Posts

Understanding of Laravel Routing and views

Posted on 11 months ago

Bhumi

The Readers’ Poll – July 2013

Posted on 5 years ago

Bhumi