Lets learn Web Designing

CSS3 Gradients for all browsers

What are CSS3 Gradients ?

Well, A Gradient can have many different dictionary meanings, but in terms of Web Design, we can define gradient as “A fill consisting of two or more colors blending together”. So If one color blends with the other color in a straight line, then this is called a simple Linear Gradient.

In earlier days of web design, The gradient effect on a website was possible only with the use of images (A sliced image getting repeated along the x-axis or y-axis). But now, when all the major browsers are in a race to expand their functionality, and support for the CSS3 properties, almost all of them have started providing the support for CSS3 gradient.

None of them have started supporting them fully, but a partial support is provided by most of them including webkit browsers ,gecko browsers, and internet explorer also. Since the partial support is provided by the browsers, we need to use the vendor specific prefix (-moz
for Mozilla Firefox, -webkit
for Webkit browsers) with the CSS3 property. Also all the browsers have a different syntax for this property. We will see that later.

Why use CSS3 Gradients ?

CSS3 gradients are partially supported by the browsers; and on top of that the image technique (A sliced image getting repeated along the x-axis or y-axis) for generating the gradient effect on a website works perfectly well in all the browsers. So the question is why do we care about using the CSS3 gradient property?

Before answering this question, let me tell you that CSS3 gradients fall into a category where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead. That’s right, so if we use the CSS3 gradient property (with fallback image or background), then the browsers which support the CSS3 gradient will not load the image fallback; which will result in 1 less HTTP request – Thus making your website load faster .

How to use CSS3 Gradients ?

Alright, Now lets come to the point, and see (and understand) how this property is used in different browsers. Gradient is a replacement for an image. So gradient is used with the background-image property.

<style type="text/css">
div.testing {
    background-image: url("images/background-image.png") repeat-x 0 0;                                   /* Fallback Image - For all other browsers not supporting linear gradient property */
    background-image: -moz-linear-gradient(top, #0c2f08 0%, #0cff06 100%);                               /* For Mozilla Firefox */
    background-image: -webkit-gradient(linear, left top, left bottom, from(#0c2f08), to(#0cff06));       /* For Webkit browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c2f08', endColorstr='#0cff06');  /* For Internet Explorer */

As you can see in the above code snippet, we have used 4 different lines of code. These 4 lines are for different browsers, to make sure that this is supported by all the browsers. We will see and understand the meaning of each line one by one.

The first line in the code is a simple background-image
property. This is actually the traditional way of using the gradients on web pages. This is a fallback property; which means It is supposed to be used by only those browsers that dont support the css3 gradients (like opera).

The second line in the code is used by the gecko browsers like Mozilla Firefox. The picture given below explains the property in detail.

Mozilla Firefox Linear Gradient property

The third line in the code is used by the webkit browsers like Chrome and Safari. The picture given below explains the property in detail.

Webkit Linear Gradient property

The third line in the code is used by Internet Explorer. The picture given below explains the property in detail. Internet Explorer gradient filter doesn’t support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.

Internet Explorer Linear Gradient property

The Final Outcome


For more information on CSS3 Linear Gradients, please visit the following links:


4 responses

  1. A powerful share, It is extremely useful for me. Large thumb up for this weblog submit!

    January 9, 2011 at 1:52 am

  2. Wonderful article post on the blog bro. This particular is a nicely structured blog post, just the data I was looking just for. Thank you

    January 23, 2011 at 11:48 pm

  3. simple

    Thanx for share a Wonderful article.

    April 25, 2011 at 6:29 pm

  4. Dhanveer Rana

    very useful article thanks for sharing this information good job……………………………………….

    November 3, 2011 at 10:35 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s