CSS: Linear Gradient

By Xah Lee. Date: . Last updated: .

Random Gradient Generator

1 2 3 4 5 6 7

Number of colors: , , , , , .

Direction:


Linear Gradient Syntax

Here's 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: 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.

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

RGB, HSL, Color Specs

When working with gradient, it's convenient to use hsl color.

Browsers Support

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

JS in Depth
XAH
Buy Xah JavaScript Tutorial

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Transform/Animation

Line Wrap

Misc