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

how you can add Voice Search in WordPress

Posted on 6 years ago

Bhumi

How to use CONST keyword in PHP

Posted on 6 years ago

Bhumi