CSS: Linear Gradient

By Xah Lee. Date: . Last updated: .

Random Linear Gradient Generator

Number of colors:
Direction:

code:

Syntax

background-image: repeating-linear-gradient( ?direction, color1 ?stop1, color2 ?stop2, etc );

parameters:

example:

div.xbasic8100 {
 background-image: linear-gradient(90deg, red, white);
 height: 2rem;
 border: solid thin grey;
}

Direction value

Direction value by degree

ndeg

n is a number.

  • 0deg means 12 o'clock direction.
  • 90deg means 3 o'clock direction.
  • 180deg means 6 o'clock direction. (the default)
  • Positive values increases clock-wise.
background-image: linear-gradient(0, red, white, blue, yellow, green);
background-image: linear-gradient(10deg, red, white, blue, yellow, green);

by words

to direction

direction is any of

  • top → equivalent to 0deg
  • bottom → equivalent to 180deg
  • left → equivalent to 270deg
  • right → equivalent to 90deg

or a combination of 2 of them.

background-image: linear-gradient(to right, red, white, blue, yellow, green);
background-image: linear-gradient(to right bottom, red, white, blue, yellow, green);

Evenly Divided Smooth Gradiants

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

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

This is equivalent to:

background-image: 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-image: linear-gradient(90deg, yellow, red 80%, green, blue, white);

Example. Color Stops

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

background-image: 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-image: 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-image: linear-gradient(90deg, yellow 50%, red, green, blue, white);

Example. Color stops by pixel unit

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

gradient Using oklch color

background-image: linear-gradient( to right, oklch(60% 0.3 200), oklch(60% 0.3 300) );

Browsers Support

Repeating Linear Gradient

CSS gradients