CSS linear-gradient() Function

Example

This linear gradient starts at the top. It starts red, transitioning to yellow, then to blue:

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

More "Try it Yourself" examples below.

Definition and Usage

The CSS linear-gradient() function creates a linear gradient as the background.

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Example of Linear Gradient:

Version:	CSS3

Browser Support

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

Function
linear-gradient()	26	10	16	6.1	12.1
two-position color stops	71	79	64	12.1	58

CSS Syntax

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

Value	Description
side-or-corner	Optional. The gradient's starting point. Start with the keyword to followed by maximum two more keywords: left or right top or bottom The default value is to bottom
angle	Optional. The gradient line's angle of direction: 0deg equals: to top 180deg equals: to bottom 270deg equals: to left 90deg equals: to right
color-stop1, color-stop2,...	Required. Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional one- or two-position color stop (a percentage between 0% and 100% or a length along the gradient axis).

More Examples

Example

A linear gradient that starts from the left. It starts red, transitioning to blue:

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

Try it Yourself »

Example

A linear gradient that starts at top left (and goes to bottom right):

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

Try it Yourself »

Example

A linear gradient with a specified angle:

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

Try it Yourself »

Example

A linear gradient with many color stops:

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

Try it Yourself »

Example

A linear gradient with two-position 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 »