Tag Archives: gradient


You can display Gradients with CSS3 and the background-image property. Instead of specifying an image, you specify the gradient and the colors you want. The gradients can be quite complicated with multiple colors, but I will stick to 2 colors today. You can also use a radial gradients, which I will cover in the future.

  background-color: #77CC11;
  background-image: -moz-linear-gradient(top, #8aec14, #528d0c); 
          -webkit-gradient(linear, left top, left bottom, from(#8aec14), to(#528d0c)); 
  background-image: -webkit-linear-gradient(top, #8aec14, #528d0c); 
  background-image: -o-linear-gradient(top, #8aec14, #528d0c);
  background-image: linear-gradient(top, #8aec14, #528d0c);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#8aec14', 


The first thing you want to specify is a background color for fall back in case the gradient doesn’t work, or the user is on a browser that doesn’t support the property. I chose a color that falls in the middle of the my starting color and ending color.

The reason there are two webkit lines, is that until a few months ago, webkit had it’s own syntax from gradients which was significantly different than the mozilla version. Thankfully, they decided to switch to the format that others are using, so now the only difference is the prefix. The newer version is simpler and easier to remember, also. If you want to be sure your gradients will work in older versions of Safari and Chrome you can use the second line. In time though, because most users of those browsers update fairly quickly, you can probably safely skip it.


The first property is the starting point of the gradient. You can specify a side (left, right, top, bottom) or a corner (i.e. top right, etc.) The second property is the starting color, and the third property is the ending color. If you don’t specify any other stops, the gradient will be a gradual steady gradient from starting color to ending color.

Horizontal Example

Here is an example of a Left to Right gradient. The code is exactly the same as in the snippet above, except you chance the word “top” to “left”. (The early webkit version will use “left top, right bottom”.)

The filter property for IE, only works from top down, so if you really want a horizontal gradient, you will need to use an image. Just specify that first before the gradient code in your CSS. If you do that, other browsers that do support gradients will skip downloading the image, so there is no harm in having it for IE.

Internet Explorer

There are a few techniques you can use to get gradients in IE, which still does not support gradients on the background-image, even in IE9. The simplest, if you want a top to bottom gradient is to use “filter” with the syntax I specified above. You can also use CSS3PIE.

-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);