CSS linear-gradient() Function

div {
  background: linear-gradient(red, green, yellow, pink, purple);
}

Meaning

The linear-gradient() css function creates an image consisting of a progressive transition between two or more colors along a straight line.

Note: To create a linear gradient that repeats so as to fill its container, use the repeating-linear-gradient() function instead.

Version: CSS3

Standard Syntax

background-image: linear-gradient(direction, colorN);

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

Function Arguments

The following table describes the arguments of this function.

More Example

div {
  background: linear-gradient(to right, red 0% 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80% 100%);
}

Direction - Top to Bottom (this is default value)

The following example shows a linear gradient that starts at the top. It starts red, green, and blue:

div {
  height: 250px;
  background-image: linear-gradient(red, green, blue);
}

Direction - Left to Right

The following example shows a linear gradient that starts from the left. It starts red, green, and blue:

div {
  height: 250px;
  background-image: linear-gradient(to right, red, green, blue);
}

Direction - Right to Left

The following example shows a linear gradient that starts from the right. It starts red, green, and blue:

div {
  height: 250px;
  background-image: linear-gradient(to left, red, green, blue);
}

Direction - Diagonal - to bottom Left

The CSS gradients can make diagonally by specifying both the horizontal and vertical starting positions.

The following example shows a linear gradient that starts at bottom left. It starts red, green, and blue:

div {
  height: 250px;
  background-image: linear-gradient(to bottom left, red, green, blue);
}

Creating CSS Gradients Angles

If you want more control over its direction, you can give the gradient a specific angle.

div {
  height: 250px;
  background-image: linear-gradient(120deg , red, green, blue);
}

Creating Hard Lines

To create a hard line between two colors, creating a stripe instead of a gradual transition, adjacent color stops can be set to the same location.

The following example create the colors share a color stop at the 50% mark, halfway through the gradient:

div {
  height: 250px;
  background: linear-gradient(to bottom left, red 50%, yellow 50%);
}

Overlaying gradients

The CSS Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects.

The backgrounds are stacked from top to bottom, with the first specified being on top.

div {
  height:250px;
  background: linear-gradient(to right, transparent, red),url('fox.png') no-repeat;
}

Creating CSS Gradients Multiple Color Stops

You don't have to limit yourself to two colors—you may use as many as you like! By default, colors are evenly spaced along the gradient.

div {
  height: 250px;
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

Creating CSS Gradients Stripes

To include a solid, non-transitioning color area within a gradient, include two positions for the color stop.

Color stops can have two positions, which is equivalent to two consecutive color stops with the same color at different positions.

The color will reach full saturation at the first color stop, maintain that saturation through to the second color stop, and transition to the adjacent color stop's color through the adjacent color stop's first position.

div {
  height: 250px;
  background-image: linear-gradient(to left, lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
}

Creating Stacked gradients

You can even stack gradients with other gradients. As long as the top gradients aren't entirely opaque, the gradients below will still be visible.

div {
  height: 250px;
  background:
    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}