Cross-Browser Gradient Backgrounds

by Curtiss   |   last updated July 25, 2010   |   CSS Tutorials ·

One of the great new features coming with CSS3 is the ability to use native gradient backgrounds. In addition to saving server resources (no need to call an external image), the gradients tend to be more vibrant and faithful to the original colors than any external images.

So far, none of the modern browsers have agreed on which method to use to implement the gradients, so you will need to utilize a few different methods in order to get it to work in multiple browsers.

Chrome and Safari (and, as far as I know, all other modern Webkit-based browsers) currently utilize the proprietary method -webkit-gradient(), while Firefox uses the proprietary method -moz-[type]-gradient(). No versions of Internet Explorer (except possibly the IE9 platform preview) support CSS3 gradients, but IE does support a proprietary filter() method that is capable of implementing native gradients. Unfortunately, Opera still has no native support for gradients, but using a background color, you can allow your page to degrade gracefully in that browser.

Webkit Gradients

The -webkit-gradient() method accepts five arguments, in the following order:

1. Gradient type (linear or radial)
2. Gradient starting point (top left, top right, bottom left, bottom right, etc.) – I believe you can also use integers for the starting and ending points, but I’ve not tested this
3. Gradient ending point (top left, top right, bottom left, bottom right, etc.)
4. Gradient starting color
5. Gradient ending color

Therefore, to create a straight, vertical linear gradient that goes from black to white, you would use code like:

-webkit-gradient(linear, top left, bottom left, from(#000), to(#fff));

To create a straight, horizontal linear gradient that goes from black to white, you would use:

-webkit-gradient(linear, top left, top right, from(#000), to(#fff));

To create a diagonal linear gradient from black to white, you would use:

-webkit-gradient(linear, top left, bottom right, from(#000), to(#fff));

More information about Webkit gradients can be found on the Surfin’ Safari website.

Firefox Gradients

Firefox (and potentially other modern Mozilla-based browsers) use a slightly different method to generate CSS gradients. Instead of using a property within the method to determine what type of gradient to generate, you use different methods to create different types of gradients in Firefox. To create a linear gradient, you would use -moz-linear-gradient, and to create a radial gradient, you would use -moz-radial-gradient().

Firefox gradients are a little bit more flexible than Webkit gradients. With Mozilla, in addition to being able to indicate a starting and ending color, you can also indicate the angle at which you want the gradient created and you can specify stops within the gradient (rather than having a uniform gradient from one end to the other).

To create a vertical linear gradient from black to white within Mozilla, you would use some code similar to:

-moz-linear-gradient(top, #000, #fff)

To create a horizontal linear gradient from black to white, you would use:

-moz-linear-gradient(left, #000, #fff)

To create a diagonal linear gradient from black to white, you would use:

-moz-linear-gradient(left top, #000, #fff)

However, as mentioned above, you can also adjust the angle at which the gradient occurs. Therefore, if you wanted to skew the gradient at a 30 degree angle instead of a 90 degree angle, you could use something like:

-moz-linear-gradient(top 30deg, #000, #fff)

You can even add color stops to the gradient within Mozilla. More in-depth information about Mozilla gradients, including the color stops, can be found on the Mozilla Hacks website.

Internet Explorer Gradients

To implement gradients in Internet Explorer, you have to use the proprietary filter CSS property. To create a gradient within Internet Explorer, you would use code similar to:

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff000000', endColorstr='#ffffffff' )

The gradient method accepts the following parameters:

1. EndColor – I have never used this parameter before (I always use the EndColorStr parameter instead), but it appears that it accepts an integer value for the color, between 0 and 4294967295. It also appears that you can use a hexadecimal value (in ARGB format) for this parameter, but you need to prefix it with 0x to indicate that it is a hexadecimal value.
2. EndColorStr – Accepts a hexadecimal color string. You can also use an eight-character color value, with the opacity (from 00 to ff) as the first 2 characters, followed by the red value, green value and blue value, respectively. For instance, to create a gradient that ends with black at 50% opacity, you would use the color value #77000000
3. StartColor – See the notes about EndColor
4. StartColorStr – See the notes about EndColorStr
5. GradientType – Set to 0 for a vertical gradient, set to 1 for a horizontal gradient. Defaults to 0

You can find the official documentation on Internet Explorer gradients on the MSDN website.

Putting it All Together

To put all of this together and make your gradient work cross-browser, you would use some code similar to the following.
background: transparent;
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#fff));
background-image: -moz-linear-gradient(left, #000, #fff);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff000000', endColorstr='#ffffffff' );
It is important to note that the Webkit and Mozilla implementations of the gradient() method actually generate images, so they will replace any background image you’ve already specified. To keep things simple, I usually use the background-image CSS property rather than just the background property. The Internet Explorer filter property is a completely separate CSS property, so it will not replace any others. Therefore, you may want to preface it with “background: transparent;” to ensure no other background colors or images interfere with the filter.

Therefore, if you want a fallback background color for Opera and other unsupported browsers, you will probably want to declare the background color first, then the Webkit and Mozilla gradient methods, then insert the filter property inside of IE conditional comments, preceded by the transparent background call.

All together, that might look more like:
<style>
background: #000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#fff));
background-image: -moz-linear-gradient(left, #000, #fff);
</style>
<!--[if IE]>
<style>
background: transparent;
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff000000', endColorstr='#ffffffff' );
</style>
<![endif]-->

For more information about using cross-browser gradients, you can check out the WebDesignerWall.