Web/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.

<div class="linear-gradient">Linear gradient</div>

div {
  width: 240px;
  height: 80px;
}

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

Radial gradient example

A simple radial gradient.

<div class="radial-gradient">Radial gradient</div>

div {
  width: 240px;
  height: 80px;
}

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

Repeating gradient examples

Simple repeating linear and radial gradient examples.

<div class="linear-repeat">Repeating linear gradient</div>
<br>
<div class="radial-repeat">Repeating radial gradient</div>

div {
  width: 240px;
  height: 80px;
}

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

<div class="conic-gradient">Conic gradient</div>

div {
  width: 200px;
  height: 200px;
}

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

Specifications

Specification	Status	Comment
CSS Images Module Level 4The definition of '<gradient>' in that specification.	Working Draft	Adds conic-gradient
CSS Images Module Level 3The definition of '<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	Safari on iOS	Samsung Internet
`<gradient>`	Chrome Full support 26 Full support 26 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12 Prefixed' Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -ms-	Firefox Full support 3.6 Notes' Full support 3.6 Notes' Notes' Gradients are limited to `background-image`, `border-image`, and `mask-image`.	IE Full support 10 Prefixed' Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -ms-	Opera Full support 12.1 Full support 12.1 No support 11 — 15 Prefixed' Prefixed' Implemented with the vendor prefix: -o- Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Full support 6.1 Full support 6.1 Full support 5.1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support ≤37 Full support ≤37 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 26 Full support 26 Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 4 Notes' Full support 4 Notes' Notes' Gradients are limited to `background-image`, `border-image`, and `mask-image`.	Opera Android Full support 12.1 Full support 12.1 No support 11 — 14 Prefixed' Prefixed' Implemented with the vendor prefix: -o- Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Full support 7 Full support 7 Full support 6 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 1.5 Full support 1.5 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-
`conic-gradient()`	Chrome Full support 69 Full support 69 Full support 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.	Edge Full support 79	Firefox Full support 83 Full support 83 Full support 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.	IE No support No	Opera Full support 56 Full support 56 Full support 46 Disabled' Disabled' From version 46: this feature is behind the `Enable Experimental Web Platform Features` preference.	Safari Full support 12.1	WebView Android Full support 69	Chrome Android Full support 69 Full support 69 Full support 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.	Firefox Android Full support 83 Full support 83 Full support 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.	Opera Android Full support 48 Full support 48 Full support 43 Disabled' Disabled' From version 43: this feature is behind the `Enable Experimental Web Platform Features` preference.	Safari iOS Full support 12.2	Samsung Internet Android Full support 10.0
`linear-gradient()`	Chrome Full support 26 Full support 26 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12	Firefox Full support 16 Notes' Full support 16 Notes' 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.6 Prefixed' 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 `<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. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 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.	IE Full support 10 Notes' Full support 10 Notes' 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 — 15 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -o- Notes' 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. Full support 15 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' 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.	Safari Full support 6.1 Full support 6.1 Full support 5.1 Prefixed' 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 `<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.	WebView Android Full support ≤37 Full support ≤37 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 26 Full support 26 Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 16 Notes' Full support 16 Notes' 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 4 Prefixed' 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 `<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. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 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.	Opera Android Full support 12.1 Full support 12.1 No support 11 — 14 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -o- Notes' 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. Full support 14 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' 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.	Safari iOS Full support 6.1 Full support 6.1 Full support 6 Prefixed' 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 `<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.	Samsung Internet Android Full support 1.5 Full support 1.5 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-
`radial-gradient()`	Chrome Full support 26 Full support 26 Full support 13 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12	Firefox Full support 16 Notes' Full support 16 Notes' 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.6 Prefixed' 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`. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 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.	IE Full support 10 Notes' Full support 10 Notes' 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.6 — 15 Prefixed' Prefixed' Implemented with the vendor prefix: -o- Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Full support 6.1 Full support 6.1 Full support 5.1 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' Safari 4 was supporting an experimental `-webkit-gradient(radial,…)` function. This old outdated syntax is still supported for compatibility purposes.	WebView Android Full support ≤37 Full support ≤37 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 26 Full support 26 Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 16 Notes' Full support 16 Notes' 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 4 Prefixed' 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`. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 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.	Opera Android Full support 12.1 Full support 12.1 No support 12 — 14 Prefixed' Prefixed' Implemented with the vendor prefix: -o- Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Full support 6.1 Full support 6.1 Full support 6 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' Safari 4 was supporting an experimental `-webkit-gradient(radial,…)` function. This old outdated syntax is still supported for compatibility purposes.	Samsung Internet Android Full support 1.5 Full support 1.5 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-
`repeating-conic-gradient()`	Chrome Full support 69 Full support 69 Full support 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.	Edge Full support 79	Firefox No support No	IE No support No	Opera Full support 56 Full support 56 Full support 46 Disabled' Disabled' From version 46: this feature is behind the `Enable Experimental Web Platform Features` preference.	Safari Full support 12.1	WebView Android Full support 69	Chrome Android Full support 69 Full support 69 Full support 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.	Firefox Android No support No	Opera Android Full support 48 Full support 48 Full support 43 Disabled' Disabled' From version 43: this feature is behind the `Enable Experimental Web Platform Features` preference.	Safari iOS Full support 12.2	Samsung Internet Android Full support 10.0
`repeating-linear-gradient()`	Chrome Full support 26 Full support 26 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12	Firefox Full support 16 Notes' Full support 16 Notes' 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.6 Prefixed' 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 `<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. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 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.	IE Full support 10 Notes' Full support 10 Notes' 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 Full support 15 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' 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. No support 11 — 15 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -o- Notes' 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.	Safari Full support 6.1 Full support 6.1 Full support 5.1 Prefixed' 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 `repeating-linear-gradient()`. This old outdated syntax is still supported for compatibility purposes. Notes' 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.	WebView Android Full support ≤37 Full support ≤37 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 26 Full support 26 Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 16 Notes' Full support 16 Notes' 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 4 Prefixed' 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 `<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. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 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.	Opera Android Full support 12.1 Full support 12.1 Full support 14 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' 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. No support 11 — 14 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -o- Notes' 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.	Safari iOS Full support 6.1 Full support 6.1 Full support 6 Prefixed' 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 `repeating-linear-gradient()`. This old outdated syntax is still supported for compatibility purposes. Notes' 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.	Samsung Internet Android Full support 1.5 Full support 1.5 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-
`repeating-radial-gradient()`	Chrome Full support 26 Full support 26 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12	Firefox Full support 16 Notes' Full support 16 Notes' 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.6 Prefixed' 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`. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 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.	IE Full support 10	Opera Full support 12.1 Full support 12.1 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- No support 12 — 15 Prefixed' Prefixed' Implemented with the vendor prefix: -o-	Safari Full support 6.1 Full support 6.1 Full support 5.1 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' Safari 4 was supporting an experimental `-webkit-gradient(radial,…)` function. This old outdated syntax is still supported for compatibility purposes.	WebView Android Full support 4.4 Full support 4.4 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 26 Full support 26 Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 16 Notes' Full support 16 Notes' 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 10 Prefixed' 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`. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 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.	Opera Android Full support 12.1 Full support 12.1 Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- No support 12 — 14 Prefixed' Prefixed' Implemented with the vendor prefix: -o-	Safari iOS Full support 7 Full support 7 Full support 6 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' Safari 4 was supporting an experimental `-webkit-gradient(radial,…)` function. This old outdated syntax is still supported for compatibility purposes.	Samsung Internet Android Full support 1.5 Full support 1.5 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-

Legend

Full support: Full support
No support: No support
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.