CSS: cross browser gradient (a tutorial)

Tweet

I've already talked about CSS gradients in the past, but mainly together with other CSS features like box-shadow or border-radius. In the following article we will create only gradients for a simple box... and we are going to make it work for any browser. This time no compatibility issue, then.

The style
This time I will start straight from the code. Afterward I am going to explain how we can customize it, understanding what's behind.

.gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image: -moz-linear-gradient(top, #444444, #999999);
  background-image: -ms-linear-gradient(top, #444444, #999999);
  background-image: -o-linear-gradient(top, #444444, #999999);
  background-image: linear-gradient(top, #444444, #999999);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
  height: 200px;
  width: 200px;
  color: white
}

The result for the above code will be the following box:

This is the styled div with our gradient.
As you can see, the background has a gradient going from top to bottom, from colour #444444 to color #999999.
Let's now go on with the explanation of the style

The explanation

The first line of code is setting the background colour for our box (in the example I used a <div>).

The second line will create the gradient for Chrome and Safari 4+. It is set to a linear gradient, going from left top to left bottom. The type (linear) of gradient is the first we set, then we set the start point (left top) and the end point (left bottom). The other parameters are the starting colour and the ending colour.

Third line is dealing with Chrome 10+, Safari 5.1+, IOS 5+. As you can see, the type is set in the style itself, while we need to state the start point and the colours as parameters.

The above two lines were needed for Webkit browsers. The fourth line is for Mozilla. Specifically Firefox 3.6. The fifth for Internet Explorer 10 and the sixth for Opera 11.10+. The logic is the same as the third line.

background-image: linear-gradient(top, #444444, #999999);

The above code is the markup for all "newer" browsers.

The last line is for Internet Explorer 6-9, using the DXImageTransform.

Other options

In our example we used a linear gradient. However we could use a radial or an eliptical one. That will again pose a compatibility issue with older browsers. A good place to test those possibilities is CSS Gradient Background Maker, paying attention to covered browsers in the resulting code.

And that's all. Enjoy and let me know what you think.