CSS Linear Gradient Tutorial

By Xah Lee. Date: . Last updated: .
click me for random gradient.

Here's a example linear gradient:

90deg, red, yellow

CSS code:

div { background: linear-gradient(90deg, red, yellow); }

0deg means the gradient line points upward. Positive values are clock-wise. So, 90deg means pointing to the right.

Evenly Divided Smooth Gradiants

In this example, the gradient line is at 90 degree. (horizontal, left to right) The box is evenly divided into 5 colors: yellow, red, green, blue, white.

yellow, red, green, blue, white

CSS code:

background: linear-gradient(90deg, yellow, red, green, blue, white);

This is equivalent to:

background: linear-gradient(90deg, yellow 0%, red 25%, green 50%, blue 75%, white 100%);

Specify Color Stops

Normally, the different colors are evenly divided along 2 end points in a given direction. The starting color is at 0%. The ending color is at 100%.

You can specify the position on the gradient line for each color. In this example, we use the same 5 colors, but with red starting at 80%.

yellow, red 80%, green, blue, white

CSS code:

background: linear-gradient(90deg, yellow, red 80%, green, blue, white);

Color Stops Example 2

Here we specify 2 color stops. Red at 80% and green at 95%.

yellow, red 80%, green 95%, blue, white

CSS code:

background: linear-gradient(90deg, yellow, red 80%, green 95%, blue, white);

Sharp Color Change

When 2 color stops are at the same position, you have a sharp color change. Here, both red and green are at 80%.

yellow, red 80%, green 80%, blue, white

CSS code:

background: linear-gradient(90deg, yellow, red 80%, green 80%, blue, white);

First Color's Color Stop

If the first color has a color stop other than 0%, than all colors before it is the same. (similar for last color)

yellow 50%, red, green, blue, white

CSS code:

background: linear-gradient(90deg, yellow 50%, red, green, blue, white);

Color Stops by Pixels

The percentage for color stops can be any CSS length unit. 〔➤see CSS: Units

Each color stop should be equal or greater than its previous color stop value, else it doesn't make sense.

Here's color stops by pixels.

yellow, red 100px, green 200px , blue 300px, white

CSS code:

background: linear-gradient(90deg, yellow, red 100px, green 200px , blue 300px, white);

RGB, HSL, Color Specs

Note that color spec can be any CSS color spec, even with opacity.

Browsers Support

As of , Firefox, Google Chrome, Opera, supports it.

for older version of browsers, you might need to use experimental support.

Note that these experimental CSS spec's degree orientation is different from W3C's spec. 0 degree here means pointing to the right.

background: -webkit-linear-gradient(0deg, yellow, red);
background: -moz-linear-gradient(0deg, yellow, red);
background: -o-linear-gradient(0deg, yellow, red);
background: -ms-linear-gradient(0deg, yellow, red);

Reference

http://www.w3.org/TR/css3-images/#linear-gradient-type

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.