The linear-gradient()
CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient>
data type, which is a special kind of <image>
.
As with any gradient, a linear gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.
To create a linear gradient that repeats so as to fill its container, use the repeating-linear-gradient()
function instead.
Because <gradient>
s belong to the <image>
data type, they can only be used where <image>
s can be used. For this reason, linear-gradient()
won't work on background-color
and other properties that use the <color>
data type.
A linear gradient is defined by an axis—the gradient line—and two or more color-stop points. Each point on the axis is a distinct color; to create a smooth gradient, the linear-gradient()
function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects the gradient line.
The gradient line is defined by the center of the box containing the gradient image and by an angle. The colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points.
The starting point is the location on the gradient line where the first color begins. The ending point is the point where the last color ends. Each of these two points is defined by the intersection of the gradient line with a perpendicular line passing from the box corner which is in the same quadrant. The ending point can be simply understood as the symmetrical point of the starting point. These somewhat complex definitions lead to an interesting effect sometimes called magic corners: the corners nearest to the starting and ending points have the same color as their respective starting or ending points.
By adding more color-stop points on the gradient line, you can create a highly customized transition between the starting and ending colors. A color-stop's position can be explicitly defined by using a <length>
or a <percentage>
. If you don't specify the location, it is placed halfway between the one that precedes it and the one that follows it.
/* A gradient tilted 45 degrees, starting blue and finishing red */ linear-gradient(45deg, blue, red); /* A gradient going from the bottom right to the top left corner, starting blue and finishing red */ linear-gradient(to left top, blue, red); /* A gradient going from the bottom to top, starting blue, turning green at 40% of its length, and finishing red */ linear-gradient(0deg, blue, green 40%, red);
<side-or-corner>
to
and up to two keywords: one indicates the horizontal side (left
or right
), and the other the vertical side (top
or bottom
). The order of the side keywords does not matter. If unspecified, it defaults to to bottom
.to top
, to bottom
, to left
, and to right
are equivalent to the angles 0deg
, 180deg
, 270deg
, and 90deg
respectively. The other values are translated into an angle.<angle>
0deg
is equivalent to to top
; increasing values rotate clockwise from there.<color-stop>
<color>
value, followed by an optional stop position (either a <percentage>
or a <length>
along the gradient's axis).Note: Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.
linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) \---------------------------------/ \----------------------------/ Definition of the gradient line List of color stops where <side-or-corner> = [left | right] || [top | bottom] and <color-stop> = <color> [ <percentage> | <length> ]?
body { background: linear-gradient(45deg, red, blue); }
body { background: linear-gradient(135deg, orange, orange 60%, cyan); }
Note: Please see Using CSS gradients for more examples.
Specification | Status | Comment |
---|---|---|
CSS Images Module Level 4 The definition of 'Gradient Color-Stops' in that specification. | Working Draft | Adds interpolation hints. |
CSS Images Module Level 3 The definition of 'linear-gradient()' in that specification. | Candidate Recommendation | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 26
|
12 | 16
|
10
|
12.1
|
6.1
|
to keyword |
26 | 12 | 10 | 10 | 12.1 | 6.1 |
Interpolation Hints / Gradient Midpoints | 40 | No | 36 | No | 27 | 6.1 |
Unitless 0 for <angle> |
26 | 12 | 55
|
No | 16 | 6.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes
|
Yes
|
Yes | 16
|
Yes | Yes | Yes |
to keyword |
Yes | Yes | Yes | 10 | Yes | Yes | Yes |
Interpolation Hints / Gradient Midpoints | 40 | 40 | No | 36 | Yes | Yes | Yes |
Unitless 0 for <angle> |
Yes | Yes | 12 | 55
|
Yes | Yes | Yes |
repeating-linear-gradient()
, radial-gradient()
, repeating-radial-gradient()
<image>
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient