W3cubDocs

/CSS

<gradient>

The <gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors.

A CSS 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 to which it applies.

Syntax

The <gradient> data type is defined with one of the function types listed below.

Linear gradient

Linear gradients transition colors progressively along an imaginary line. They are generated with the linear-gradient() function.

Radial gradient

Radial gradients transition colors progressively from a center point (origin). They are generated with the radial-gradient() function.

Repeating gradient

Repeating gradients duplicate a gradient as much as necessary to fill a given area. They are generated with the repeating-linear-gradient() and repeating-radial-gradient() functions.

Conic gradient

Conic gradients transition colors progressively around a circle. They are generated with the conic-gradient() function.

Interpolation

As with any interpolation involving colors, gradients are calculated in the alpha-premultiplied color space. This prevents unexpected shades of gray from appearing when both the color and the opacity are changing. (Be aware that older browsers may not use this behavior when using the transparent keyword.)

Examples

Linear gradient example

A simple linear gradient.

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

Radial gradient example

A simple radial gradient.

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

Repeating gradient examples

Simple repeating linear and radial gradient examples.

.linear-repeat {
  background: repeating-linear-gradient(to top left,
      lightpink, lightpink 5px, white 5px, white 10px);
}

.radial-repeat {
  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}

Conic gradient example

A simple conic gradient example. Note that this isn't supported widely across browser as of yet.

.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}

Specifications

Specification Status Comment
CSS Images Module Level 4
The definition of '<gradient>' in that specification.
Working Draft Adds conic-gradient
CSS Images Module Level 3
The definition of '<gradient>' in that specification.
Candidate Recommendation Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
<gradient> 26
26
10
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12
Prefixed
12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
3.6
3.6
Gradients are limited to background-image, border-image, and mask-image.
10
Prefixed
10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
12.1
12.1
11 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
6.1
6.1
5.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
conic-gradient() 69
69
59
Disabled
Disabled From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
79 83
83
75
Disabled
Disabled From version 75: this feature is behind the layout.css.conic-gradient.enabled preference. To change preferences in Firefox, visit about:config.
No 56
56
46
Disabled
Disabled From version 46: this feature is behind the Enable Experimental Web Platform Features preference.
12.1
linear-gradient() 26
26
10
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12 16
16
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
3.6
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Considers <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.
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
44
Prefixed 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.
10
10
Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
12.1
12.1
11 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Considers <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.
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Considers <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.
6.1
6.1
5.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
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.
Considers <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.
radial-gradient() 26
26
13
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12 16
16
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
3.6
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
44
Prefixed 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.
10
10
Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
12.1
12.1
11.6 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
6.1
6.1
5.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
repeating-conic-gradient() 69
69
59
Disabled
Disabled From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
79 No No 56
56
46
Disabled
Disabled From version 46: this feature is behind the Enable Experimental Web Platform Features preference.
12.1
repeating-linear-gradient() 26
26
10
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12 16
16
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
3.6
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Considers <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.
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
44
Prefixed 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.
10
10
Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
12.1
12.1
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Considers <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.
11 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Considers <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.
6.1
6.1
5.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
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 repeating-linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
Considers <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.
repeating-radial-gradient() 26
26
10
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12 16
16
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
3.6
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
44
Prefixed 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.
10 12.1
12.1
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
6.1
6.1
5.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
<gradient> ≤37
≤37
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
26
26
18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
4
4
Gradients are limited to background-image, border-image, and mask-image.
12.1
12.1
11 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
7
7
6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
1.5
1.5
1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
conic-gradient() 69 69
69
59
Disabled
Disabled From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
83
83
79
Disabled
Disabled From version 79: this feature is behind the layout.css.conic-gradient.enabled preference. To change preferences in Firefox, visit about:config.
48
48
43
Disabled
Disabled From version 43: this feature is behind the Enable Experimental Web Platform Features preference.
12.2 10.0
linear-gradient() ≤37
≤37
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
26
26
18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
16
16
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Considers <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.
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
44
Prefixed 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.
12.1
12.1
11 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Considers <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.
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Considers <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.
6.1
6.1
6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
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.
Considers <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.
1.5
1.5
1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
radial-gradient() ≤37
≤37
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
26
26
18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
16
16
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
44
Prefixed 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.
12.1
12.1
12 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
6.1
6.1
6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
1.5
1.5
1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
repeating-conic-gradient() 69 69
69
59
Disabled
Disabled From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
No 48
48
43
Disabled
Disabled From version 43: this feature is behind the Enable Experimental Web Platform Features preference.
12.2 10.0
repeating-linear-gradient() ≤37
≤37
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
26
26
18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
16
16
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Considers <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.
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
44
Prefixed 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.
12.1
12.1
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Considers <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.
11 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Considers <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.
6.1
6.1
6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
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 repeating-linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
Considers <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.
1.5
1.5
1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
repeating-radial-gradient() 4.4
4.4
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
26
26
18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
16
16
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
10
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
44
Prefixed 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.
12.1
12.1
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
7
7
6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
1.5
1.5
1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient