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