CSS Color Gradients

Appealing backgrounds can be created with CSS color gradients.

No image necessary, reducing download time and bandwidth usage. Do it all with CSS.

Here are examples of what can be done with the instructions you'll find here.

The latest versions of the most popular browsers all support CSS gradients. Safari for desktop operating systems requires a "-webkit-..." declaration (see code examples). For compatibility of earlier browsers, see the Browser Compatibility table.

The implementation instructions below are in four sections:

1. The top-left example.
2. The examples on the rest of the first row.
3. The second row examples.
4. The last example.

The top-left example.

This is the most basic example of a CSS linear color gradient.

Here is the code. Notes follow.

<div style="
   height:100px;
   width:75px;
   background:-webkit-linear-gradient(#fff, #f00); /* For Safari */
   background:linear-gradient(#fff, #f00);
   ">
</div>

The four CSS declarations are for the div dimensions and for the color gradient.

The -webkit-linear-gradient declaration is for Safari and should come before the standard linear-gradient declaration.

The gradient is from white (#fff) to red (#f00), from top to bottom. The top to bottom gradient is default.

The examples on the rest of the first row.

The gradient of the middle example of the first row is from left to right.

Here is the code. Notes follow.

<div style="
   height:100px;
   width:75px;
   background:-webkit-linear-gradient(left, #fff, #f00); /* For Safari */
   background:linear-gradient(to right, #fff, #f00);
   ">
</div>

Notice there's a direction value preceding the color values.

For Safari's -webkit-... declaration, the direction indicator is "left" (where the gradient begins). For the standard CSS declaration, the direction is "to right" (the direction of the gradient).

The gradient of the last example of the first row is from left top to bottom right.

The code with notes following:

<div style="
   height:100px;
   width:75px;
   background:-webkit-linear-gradient(left top, #fff, #f00); /* For Safari */
   background:linear-gradient(to bottom right, #fff, #f00);
   ">
</div>

As in the above example, the direction indicator for Safari and standard CSS have different terms and indicate a different point. Declaration -webkit-linear-gradient is "left top", where the gradient begins, and declaration linear-gradient is "to bottom right", the direction of the gradient.

The second row examples.

The only difference in the code between the first and second rows is that the second row specifies three colors instead of two. The first row had white (#fff) to red (#f00) gradient. The second row has white (#fff) to red (#f00) to white (#fff) gradient.

Here is the code for each of the three examples on the second row.

<div style="
   height:100px;
   width:75px;
   background:-webkit-linear-gradient(#fff, #f00, #fff); /* For Safari */
   background:linear-gradient(#fff, #f00, #fff);
   ">
</div>

<div style="
   height:100px;
   width:75px;
   background:-webkit-linear-gradient(left, #fff, #f00, #fff); /* For Safari */
   background:linear-gradient(to right, #fff, #f00, #fff);
   ">
</div>

<div style="
   height:100px;
   width:75px;
   background:-webkit-linear-gradient(left top, #fff, #f00, #fff); /* For Safari */
   background:linear-gradient(to bottom right, #fff, #f00, #fff);
   ">
</div>

The last example.

The example on the last row demonstrates that many colors can be specified for the gradient.

Here is the code.

<div style="
   height:100px;
   width:300px;
   background:-webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Safari */
   background:linear-gradient(red, orange, yellow, green, blue, indigo, violet);
   ">
</div>

More About CSS Color Gradients

You've read how to accomplish CSS linear color gradients. But only the basics. A lot of information couldn't be covered in this one article.

Not mentioned are ways to make the gradient at a specific angle. There are ways to put specific colors at specific locations along the gradient. In addition to linear gradients, there are radial gradients and repeating gradients.

If you're interested in learning more about gradients, see the Using CSS gradients and the linear-gradient pages at Mozilla.org.

Will Bontrager