We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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.

## Composition of a linear gradient

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.

## Syntax

```/* A gradient tilted 45 degrees,
starting blue and finishing red */

/* A gradient going from the bottom right to the top left corner,
starting blue and finishing red */

/* A gradient going from the bottom to top,
starting blue, turning green at 40% of its length,
and finishing red */
```

### Values

`<side-or-corner>`
The position of the gradient line's starting point. If specified, it consists of the word `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`.
The values `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>`
The gradient line's angle of direction. A value of `0deg` is equivalent to `to top`; increasing values rotate clockwise from there.
`<color-stop>`
A color-stop's `<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.

### Formal syntax

```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> ]?`
```

## Examples

### Gradient at a 45-degree angle

```body {
}
```

```body {
background: linear-gradient(135deg, orange, orange 60%, cyan);
}```

## Specifications

Specification Status Comment
CSS Images Module Level 4
The definition of 'Gradient Color-Stops' in that specification.
CSS Images Module Level 3
The definition of 'linear-gradient()' in that specification.
Candidate Recommendation Initial definition.

## Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera (Presto) Safari
Basic support (on `background` and `background-image`) 3.6 (1.9.2)-moz[1]
16 (16)[2]
10.0 (534.16)-webkit[6] 10.0[4] 11.10-o[1] 5.1-webkit[6]
On `border-radius` 29 (29) (Yes) (Yes) (Yes) (Yes)
On any other property that accepts `<image>` No support (Yes) (Yes) (Yes) (Yes)
Legacy webkit syntax No support 3-webkit[3] No support No support 4.0-webkit[3]
Legacy 'from' syntax (without `to`) 3.6 (1.9.2)-moz[5] 10.0 (534.16)-webkit[3] 10 11.10-o[5] 5.1-webkit[3]
Standard syntax (using the `to` keyword) 16 (16) 26.0 (537.27) 10 12.10 6.1
Interpolation hints/gradient midpoints (a percent without a color) 36 (36) 40 ? 27 ?
Unitless 0 for `<angle>` 46 (46)-webkit[7]
55 (55)[7]
(Yes) Edge 12 (Yes) (Yes)
Feature Firefox (Gecko) Chrome Internet Explorer Opera (Presto) Safari
Basic support (on `background` and `background-image`) 1.0 (1.9.2)-moz[1]
16.0 (16)[2]
16-webkit
26
10 (Yes) (Yes)
On `border-radius` ? ? ? ? ?
On any other property that accepts `<image>` ? ? ? ? ?
Legacy webkit syntax ? ? ? ? ?
Legacy 'from' syntax (without `to`) ? ? ? ? ?
Standard syntax (using the `to` keyword) ? ? ? ? ?
Interpolation hints/gradient midpoints (a percent without a color) ? ? ? ? ?

[1] Gecko, Opera & Webkit consider `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right. This is different from the latest specification where an angle of `0deg` as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.

[2] Before Gecko 36.0 (Firefox 36.0 / Thunderbird 36.0 / SeaMonkey 2.33), Gecko didn't apply gradients on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.

[3] WebKit since 528 supports the legacy `-webkit-gradient(linear,…)` function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and an angle in `-webkit-linear-gradient()`. You can achieve the same effect by offsetting the color stops.

[4] Internet Explorer 5.5 through 9.0 supports proprietary `filter: progid:DXImageTransform.Microsoft.Gradient()` filter.

[5] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the `to` keyword, and effectively considered as a 'from' position. The `to` syntax has been added in Firefox 10 and Opera 11.60.

In addition to the unprefixed support using the standard syntax, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a `-webkit` prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference `layout.css.prefixes.webkit`, defaulting to `false`. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to `true`.

[6] Opera & Webkit consider `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right. This is different from the latest specification where an angle of `0deg` as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`. WebKit since 528 supports the legacy `-webkit-gradient(linear,…)` function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and an angle in `-webkit-linear-gradient()`. You can achieve the same effect by offsetting the color stops.

[7] To match webkit/blink behavior, unitless 0 for angles are accepted, in `-webkit-linear-gradient` function since Gecko 46.0 (Firefox 46.0 / Thunderbird 46.0 / SeaMonkey 2.43) (see bug 1239153), and in `linear-gradient` function since Gecko 55.0 (Firefox 55.0 / Thunderbird 55.0 / SeaMonkey 2.52) (see bug 1363292).