Nasi wolontariusze nie przetłumaczyli jeszcze tego artykułu na język Polski. Dołącz do nas i pomóż go przetłumaczyć!
Można także przeczytać artykuł w języku: English (US).

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 multiple colors. A color-stop's position can be explicitly defined by using a `<length>` or a `<percentage>`. If you don't specify the location of a color, it is placed halfway between the one that precedes it and the one that follows it. The following two gradients are equivalent.

```linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);```

By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this midpoint to any position between two color stops by adding an unlabelled % color hint between the two colors to indicate where the middle of the color transition should be. The following example is solid red from the start to the 10% mark and solid blue from 90% to the end. Between 10% and 90% the color transitions from red to blue, however the midpoint of the transition is at the 30% mark rather than 50% as would have happened without the 30% color hint.

`linear-gradient(red 10%, 30%, blue 90%);`

If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location.

Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition. The following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient

```linear-gradient(red 40%, yellow 30%, blue 65%);
```

Multi-position color stop are allowed. A color can be declared as two adjacent color stops by including both positions in the CSS declaration. The following three gradients are equivalent:

```linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);```

By default, if there is no color with a 0% stop, the first color declared will be at that point. Similarly, the last color will continue to the 100% mark, or be at the 100% mark if no length has been declared on that last stop.

## 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 */

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

/* Color hint: A gradient going from the left to right,
starting red, getting to the midpoint color
10% of the way across the length of the gradient,
taking the rest of the 90% of the length to change to blue */

/* Multi-position color stop: A gradient tilted 45 degrees,
with a red bottom-left half and a blue top-right half,
with a hard line where the gradient changes from red to blue */
linear-gradient(45deg, red 0 50%, blue 50% 100%);```

### 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.
`<linear-color-stop>`
A color-stop's `<color>` value, followed by one or two optional stop positions, (each being either a `<percentage>` or a `<length>` along the gradient's axis).
`<color-hint>`
The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

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-list> )
\---------------------------------/ \----------------------------/
Definition of the gradient line        List of color stops

where <side-or-corner> = [ left | right ] || [ top | bottom ]
and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
and <linear-color-stop> = <color> [ <color-stop-length> ]?
and <color-stop-length> = [ <percentage> | <length> ]{1,2}
and <color-hint> = [ <percentage> | <length> ]```

## Examples

### Gradient at a 45-degree angle

```body {
}
```

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

### Gradient with multi-position color stops

This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.

```body {
red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}```

## 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

Update compatibility data on GitHub
Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Chrome Full support 26 Full support 26 Full support 10Prefixed Prefixed Implemented with the vendor prefix: -webkit- Edge Full support 12 Firefox Full support 16Notes Full support 16Notes Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency. Full support 3.6Prefixed Notes Prefixed Implemented with the vendor prefix: -moz-Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.Notes Considers `` 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. Full support 49Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 44Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit-Disabled From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. IE Full support 10Notes Full support 10Notes Notes Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: `-ms-filter: progid:DXImageTransform.Microsoft.Gradient()`. Opera Full support 12.1 Full support 12.1 No support 11 — 15Prefixed Notes Prefixed Implemented with the vendor prefix: -o-Notes Considers `` 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. Full support 15Prefixed Notes Prefixed Implemented with the vendor prefix: -webkit-Notes Considers `` 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. Safari Full support 6.1 Full support 6.1 Full support 5.1Prefixed Notes Prefixed Implemented with the vendor prefix: -webkit-Notes Safari 4 was supporting an experimental `-webkit-gradient(linear,…)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.Notes Considers `` 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. WebView Android Full support Yes Full support Yes Full support YesPrefixed Prefixed Implemented with the vendor prefix: -webkit- Chrome Android Full support Yes Full support Yes Full support YesPrefixed Prefixed Implemented with the vendor prefix: -webkit- Firefox Android Full support 16Notes Full support 16Notes Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency. Full support 4Prefixed Notes Prefixed Implemented with the vendor prefix: -moz-Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.Notes Considers `` 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. Full support 49Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 44Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit-Disabled From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. Opera Android Full support 12.1 Full support 12.1 No support 11 — 14Prefixed Notes Prefixed Implemented with the vendor prefix: -o-Notes Considers `` 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. Full support 14Prefixed Notes Prefixed Implemented with the vendor prefix: -webkit-Notes Considers `` 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. Safari iOS Full support Yes Samsung Internet Android Full support Yes Chrome Full support 26 Edge Full support 12 Firefox Full support 10 IE Full support 10 Opera Full support 12.1 Safari Full support 6.1 WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 10 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes Chrome Full support 71 Edge No support No Firefox Full support 64 IE No support No Opera Full support 58 Safari ? Notes ? Notes Notes In Safari Technology Preview Release 66 WebView Android Full support 71 Chrome Android Full support 71 Firefox Android Full support 64 Opera Android Full support 50 Safari iOS ? Notes ? Notes Notes In Safari Technology Preview Release 66 Samsung Internet Android Full support Yes Chrome Full support 40 Edge No support No Firefox Full support 36 IE No support No Opera Full support 27 Safari Full support 6.1 WebView Android Full support 40 Chrome Android Full support 40 Firefox Android Full support 36 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes Chrome Full support 26 Edge Full support 12 Firefox Full support 55 Full support 55 Partial support 46Notes Notes Accepted only in `-webkit-linear-gradient()` and `-moz-linear-gradient()`, not `linear-gradient()`. IE No support No Opera Full support 16 Safari Full support 6.1 WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 55 Full support 55 Partial support 46Notes Notes Accepted only in `-webkit-linear-gradient()` and `-moz-linear-gradient()`, not `linear-gradient()`. Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes

### Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.