<gradient> | Chrome
Full support
26-
Full support
26
-
Full support
10
- Prefixed Implemented with the vendor prefix: -webkit-
| Edge
Full support
12-
Full support
12
- Prefixed Implemented with the vendor prefix: -ms-
| Firefox
Full support
3.6-
Full support
3.6
- Notes Gradients are limited to
background-image , border-image , and mask-image .
| IE
Full support
10-
Full support
10
- Prefixed Implemented with the vendor prefix: -ms-
| Opera
Full support
12.1-
Full support
12.1
-
No support
11 — 15
- Prefixed Implemented with the vendor prefix: -o-
-
Full support
15
- Prefixed Implemented with the vendor prefix: -webkit-
| Safari
Full support
6.1-
Full support
6.1
-
Full support
5.1
- Prefixed Implemented with the vendor prefix: -webkit-
| WebView Android
Full support
≤37-
Full support
≤37
-
Full support
≤37
- Prefixed Implemented with the vendor prefix: -webkit-
| Chrome Android
Full support
26-
Full support
26
-
Full support
18
- Prefixed Implemented with the vendor prefix: -webkit-
| Firefox Android
Full support
4-
Full support
4
- 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 Implemented with the vendor prefix: -o-
-
Full support
14
- Prefixed Implemented with the vendor prefix: -webkit-
| Safari iOS
Full support
7-
Full support
7
-
Full support
6
- Prefixed Implemented with the vendor prefix: -webkit-
| Samsung Internet Android
Full support
1.5-
Full support
1.5
-
Full support
1.0
- Prefixed Implemented with the vendor prefix: -webkit-
|
---|
conic-gradient() | Chrome
Full support
69-
Full support
69
-
Full support
59
- 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 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 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 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 Implemented with the vendor prefix: -webkit-
| Edge
Full support
12 | Firefox
Full support
16-
Full support
16
- 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 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 Implemented with the vendor prefix: -webkit-
-
Full support
44
- 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-
Full support
10
- 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 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 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 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 Implemented with the vendor prefix: -webkit-
| Chrome Android
Full support
26-
Full support
26
-
Full support
18
- Prefixed Implemented with the vendor prefix: -webkit-
| Firefox Android
Full support
16-
Full support
16
- 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 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 Implemented with the vendor prefix: -webkit-
-
Full support
44
- 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 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 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 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 Implemented with the vendor prefix: -webkit-
|
---|
radial-gradient() | Chrome
Full support
26-
Full support
26
-
Full support
13
- Prefixed Implemented with the vendor prefix: -webkit-
| Edge
Full support
12 | Firefox
Full support
16-
Full support
16
- 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 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 Implemented with the vendor prefix: -webkit-
-
Full support
44
- 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-
Full support
10
- 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 Implemented with the vendor prefix: -o-
-
Full support
15
- Prefixed Implemented with the vendor prefix: -webkit-
| Safari
Full support
6.1-
Full support
6.1
-
Full support
5.1
- 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 Implemented with the vendor prefix: -webkit-
| Chrome Android
Full support
26-
Full support
26
-
Full support
18
- Prefixed Implemented with the vendor prefix: -webkit-
| Firefox Android
Full support
16-
Full support
16
- 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 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 Implemented with the vendor prefix: -webkit-
-
Full support
44
- 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 Implemented with the vendor prefix: -o-
-
Full support
14
- Prefixed Implemented with the vendor prefix: -webkit-
| Safari iOS
Full support
6.1-
Full support
6.1
-
Full support
6
- 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 Implemented with the vendor prefix: -webkit-
|
---|
repeating-conic-gradient() | Chrome
Full support
69-
Full support
69
-
Full support
59
- 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 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 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 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 Implemented with the vendor prefix: -webkit-
| Edge
Full support
12 | Firefox
Full support
16-
Full support
16
- 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 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 Implemented with the vendor prefix: -webkit-
-
Full support
44
- 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-
Full support
10
- 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 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 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 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 Implemented with the vendor prefix: -webkit-
| Chrome Android
Full support
26-
Full support
26
-
Full support
18
- Prefixed Implemented with the vendor prefix: -webkit-
| Firefox Android
Full support
16-
Full support
16
- 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 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 Implemented with the vendor prefix: -webkit-
-
Full support
44
- 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 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 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 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 Implemented with the vendor prefix: -webkit-
|
---|
repeating-radial-gradient() | Chrome
Full support
26-
Full support
26
-
Full support
10
- Prefixed Implemented with the vendor prefix: -webkit-
| Edge
Full support
12 | Firefox
Full support
16-
Full support
16
- 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 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 Implemented with the vendor prefix: -webkit-
-
Full support
44
- 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 Implemented with the vendor prefix: -webkit-
-
No support
12 — 15
- Prefixed Implemented with the vendor prefix: -o-
| Safari
Full support
6.1-
Full support
6.1
-
Full support
5.1
- 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 Implemented with the vendor prefix: -webkit-
| Chrome Android
Full support
26-
Full support
26
-
Full support
18
- Prefixed Implemented with the vendor prefix: -webkit-
| Firefox Android
Full support
16-
Full support
16
- 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 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 Implemented with the vendor prefix: -webkit-
-
Full support
44
- 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 Implemented with the vendor prefix: -webkit-
-
No support
12 — 14
- Prefixed Implemented with the vendor prefix: -o-
| Safari iOS
Full support
7-
Full support
7
-
Full support
6
- 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 Implemented with the vendor prefix: -webkit-
|
---|