CSS linear-gradient() Function

Definition and Usage

CSS linear-gradient() Function used to create a linear gradient as a background.

To create a linear gradient, you must define at least two color stops. Color stops are the colors you want to achieve smooth transitions between. You can also set the starting point and direction (or angle) as well as the gradient effect.

Linear Gradient Examples:

Instances

Example 1

This linear gradient starts from the top. It transitions from red to yellow, and then to blue:

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

Try it yourself

Example 2

A linear gradient starting from the left. It transitions from red to blue:

#grad {
  background-image: linear-gradient(to right, red , blue);
}

Try it yourself

Example 3

A linear gradient starting from the top left corner (and extending to the bottom right):

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

Try it yourself

Example 4

A linear gradient specified with an angle:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

Try it yourself

Example 5

A linear gradient containing multiple color stops:

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

Try it yourself

Example 6

A linear gradient with two color stops:

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

Try it yourself

Example 7

A linear gradient with transparency:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Try it yourself

CSS syntax

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

Technical details

Browser support

The numbers in the table represent the first browser version to fully support this function.

Related pages

Tutorial:CSS gradient

Reference:CSS background-image Property

Reference:CSS conic-gradient() function

Reference:CSS radial-gradient() function

Reference:CSS repeating-conic-gradient() function

Reference:CSS repeating-linear-gradient() function

Reference:Reference: CSS repeating-radial-gradient() function