CSS: Linear Gradient

By Xah Lee. Date: 2012-04-21. Last updated: 2023-10-11.

Random Gradient Generator

Linear Gradient Syntax

Here is a example linear gradient:

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

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.

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%.

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%.

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%.

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.

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: Length Units〕

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

Here is color stops by pixels.

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