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.

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.

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.

This is equivalent to:

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

Example. Color Stops

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

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

First Color's Color Stop

If the first color has a color stop other than 0%, than all colors before it is the same.

Example. Color stops by pixel unit

Browsers Support

Repeating Linear Gradient

CSS. Background Image

CSS gradients