CSS3 Linear Gradients

of 04

Creating Cross-Browser Linear Gradients with CSS3

A simple linear gradient from left to right of #999 (dark gray) to #fff (white).
A simple linear gradient from left to right of #999 (dark gray) to #fff (white). J Kyrnin

Linear Gradients

The most common type of gradient you will see is a linear gradient of two colors. This means that the gradient will move in a straight line changing gradually from the first color to the second along that line. The image on this page shows a simple left-to-right gradient of #999 (dark gray) to #fff (white).

Linear gradients are the easiest to define, and have the most support in browsers. CSS3 linear gradients are supported in Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, and Safari 4+. Internet Explorer can add gradients using a filter and supports them back to IE 5.5. This isn't CSS3, but it is an option for cross-browser compatibility.

When you define a gradient you need to define several different things:

  • What type of gradient it is—linear or radial
  • Where the gradient should start
  • Where the gradient should stop
  • What colors are in the gradient and where they should start and stop

To define linear gradients using CSS3, you write:

linear-gradient(angle or side or corner, color stop, color stop)
  • First you define the type of gradient with the name linear-gradient.
  • Then, you define the start and stop points of the gradient in one of two ways: the angle of the line in degrees from 0 to 359, with 0 degrees pointing straight up. Or with the “side or corner” function, such as left, right, bottom, and top. These will be explained in more detail on the next page. If you leave these out, the gradient will flow from the top to the bottom of the element.
  • Then you define the color stops. You define the color stops with the color code and an optional percentage. The percentage tells the browser where on the line to start or end with that color. The default is to place the colors evenly along the line. You will learn more about color stops on page 3.

So, to define the above gradient with CSS3, you write:

linear-gradient(left, #999999 0%, #ffffff 100%);

And to set it as the background of a DIV you write:

div {
background-image: linear-gradient(left, #999999 0%, #ffffff 100%;

Browser Extensions for CSS3 Linear Gradients

To get your gradient to work cross-browser, you need to use browser extensions for most browsers and a filter for Internet Explorer 9 and lower (actually 2 filters). All of these take the same elements to define your gradient (except that you can only define 2-color gradients in IE).

Microsoft Filters and Extension—Internet Explorer is the most challenging to support, because you need three different lines to support the different browser versions. To get the above gray to white gradient you would write:

/* IE 5.5–7 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff', GradientType=1);
/* IE 8–9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#ffffff', GradientType=1)";
/* IE 10 */
-ms-linear-gradient(left, #999999 0%, #ffffff 100%);

Mozilla Extension—The -moz- extension works like the CSS3 property, just with the -moz- extension. To get the above gradient for Firefox, write:

-moz-linear-gradient(left, #999999 0%, #ffffff 100%);

Opera Extension—The -o- extension adds gradients to Opera 11.1+. To get the above gradient, write:

-o-linear-gradient(left, #999999 0%, #ffffff 100%);

Webkit Extension—The -webkit- extension works a lot like the CSS3 property. To define the above gradient for Safari 5.1+ or Chrome 10+ you write:

-webkit-linear-gradient(left, #999999 0%, #ffffff 100%);

There is also an older version of the Webkit extension that works with Chrome 2+ and Safari 4+. In it you define the type of gradient as a value, rather than in the property name. To get the gray to white gradient with this extension, write:

-webkit-gradient(linear, left top, right top, color-stop(0%,#999999), color-stop(100%,#ffffff));

Full CSS3 Linear Gradient CSS Code

For full cross-browser support to get the gray to white gradient above you should first include a fallback solid color for browsers that don't support gradients, and the last item should be the CSS3 style for browsers that are fully compliant. So, you write:

background: #999999;
background: -moz-linear-gradient(left, #999999 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#999999), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left, #999999 0%, #ffffff 100%);
background: -o-linear-gradient(left, #999999 0%, #ffffff 100%);
background: -ms-linear-gradient(left, #999999 0%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff',GradientType=1 );
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff',GradientType=1 );
background: linear-gradient(left, #999999 0%, #ffffff 100%);

The next pages in this tutorial explain the parts of a gradient in more detail, and the last page points you to a tool that is an excellent way to create CSS3 gradients automatically.

See this linear gradient in action using just CSS.

of 04

Creating Diagonal Gradients—The Angle of the Gradient

A gradient at a 45 degree angle
A gradient at a 45 degree angle. J Kyrnin

The start and stop points determine the angle of the gradient. Most linear gradients are from top to bottom or left to right. But it is possible to build a gradient that moves on a diagonal line. The image on this page shows a simple gradient that moves in a 45degree angle across the image from right to left.

Angles to Define the Gradient Line

The angle is a line on an imaginary circle in the center of the element. 0deg points up, 90deg points to the right, 180deg points down, and 270deg points to the left. You can define any angle from 0 to 359 degrees.

You should note that in a square, a 45 degree angle moves from the top left corner to the bottom right, but in a rectangle the start and end points are slightly outside the shape, as you can see in the image.

The more common way to define a diagonal gradient is to define a corner, such as top right and the gradient will move from that corner to the opposite corner. You can define the starting postion with the following keywords:

  • top
  • right
  • bottom
  • left
  • center

And they can be combined to be more specific, such as:

  • top right
  • top left
  • top center
  • bottom right
  • bottom left
  • bottom center
  • right center
  • left center

Here is the CSS for a gradient similar to the one pictured, red to white moving from the top right corner to the bottom left:

background: ##901A1C;
background-image: -moz-linear-gradient(right top,#901A1C 0%,#FFFFFF 100%);
background-image: -webkit-gradient(linear,right top, left bottom,color-stop(0, #901A1C),color-stop(1, #FFFFFF));
background: -webkit-linear-gradient(right top, #901A1C 0%, #ffffff 100%);
background: -o-linear-gradient(right top, #901A1C 0%, #ffffff 100%);
background: -ms-linear-gradient(right top, #901A1C 0%, #ffffff 100%);
background: linear-gradient(right top, #901A1C 0%, #ffffff 100%);

You may have noticed that there are no IE filters in this example. That is because IE only allows two types of filters: top to bottom (the default) and left to right (with the GradientType=1 switch).

See this diagonal linear gradient in action using just CSS.

of 04

Color Stops

A gradient with three color stops
A gradient with three color stops. J Kyrnin

With CSS3 linear gradients, you can add multiple colors to your gradient to create even fancier effects. To add these colors, you add additional colors on to the end of your property, separated by commas. You should include where on the line the colors should start or end as well.

Internet Explorer filters only support two color stops, so when you build this gradient, you should only include the first and second colors you want to display.

Here is the CSS for the above 3-color gradient:

background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 0%, #901A1C 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(51%,#901A1C), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left, #ffffff 0%,#901A1C 51%,#ffffff 100%);
background: -o-linear-gradient(left, #ffffff 0%,#901A1C 51%,#ffffff 100%);
background: -ms-linear-gradient(left, #ffffff 0%,#901A1C 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
background: linear-gradient(left, #ffffff 0%,#901A1C 51%,#ffffff 100%);

See this linear gradient with three color stops in action using just CSS.

of 04

Make Building Gradients Easier

Ultimate CSS Gradient Generator
Ultimate CSS Gradient Generator. screenshot by J Kyrnin courtesy ColorZilla

There are two sites I recommend for helping you to build gradients, they each have benefits and drawbacks to them, I haven't found a gradient builder that does everything yet.

Ultimate CSS Gradient Generator
This gradient generator is very popular because it performs in a similar manner to gradient builders in programs like Photoshop. I also like it because it gives you all the CSS extensions, not just Webkit and Mozilla. The problem with this generator is that it only supports horizontal and vertical gradients. If you want to do diagonal gradients, you have to go to the other generator I recommend.

CSS3 Gradient Generator
This generator took me a little longer to understand than the first one, but it does support changing the direction to a diagonal.

If you know of another CSS Gradient Generator that you like better than these, please let us know.