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);
}
Try it Yourself »
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:
|
| angle | Optional. The gradient line's angle of direction:
|
| 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 »
Example
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 »
Related Pages
CSS tutorial: CSS Gradients
CSS reference: CSS background-image property
