CSS Gradients

Method of defining a linear or radial color gradient as a CSS image.

W3C Candidate Recommendation: https://www.w3.org/TR/css3-images/

Usage: 95.8% + 0.84% = 96.7%

Support summary

Notes

Syntax used by browsers with prefixed support may be incompatible with that for proper support. Support can be somewhat emulated in older IE versions using the non-standard "gradient" filter. Firefox 10+, Opera 11.6+, Chrome 26+ and IE10+ also support the new "to (side)" syntax.

  1. Partial support in Opera 11.10 and 11.50 also refers to only having support for linear gradients.
  2. Partial support in Safari and Older Firefox versions refers to not using premultiplied colors which results in unexpected behavior when using the transparent keyword as advised by the spec.
  3. Implements an earlier prefixed syntax as `-webkit-gradient`

Links

Full support table

IE

5.567891011
nnnnnyy

Edge

121314151617187980818384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Firefox

233.53.6456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
nnna,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xaaaaaaaaaaaaaaaaaaaayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Chrome

4567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
a,xa,xa,xa,xa,xa,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Safari

3.13.2455.166.177.1899.11010.11111.11212.11313.11414.11515.115.2-15.315.415.515.616.016.116.216.316.416.516.617.017.117.217.317.417.517.618.018.118.218.318.418.5-18.626.0TP
nna,xa,xa,xa,xaaaaaaaaaaaaaaaaaaayyyyyyyyyyyyyyyyyyyyyyyyy

Opera

99.5-9.610.0-10.110.510.61111.111.511.61212.11516171819202122232425262728293031323334353637383940414243444546474849505152535455565758606263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
nnnnnna,xa,xy,xy,xyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Safari on iOS

3.24.0-4.14.2-4.35.0-5.16.0-6.17.0-7.188.1-8.49.0-9.29.310.0-10.210.311.0-11.211.3-11.412.0-12.112.2-12.513.0-13.113.213.313.4-13.714.0-14.414.5-14.815.0-15.115.2-15.315.415.515.6-15.816.016.116.216.316.416.516.6-16.717.017.117.217.317.417.517.6-17.718.018.118.218.318.418.5-18.626.0
a,xa,xa,xa,xa,xaaaaaaaaaaaaaaaaaaayyyyyyyyyyyyyyyyyyyyyyyy

Opera Mini

all
n

Android Browser

2.12.22.3344.14.2-4.34.44.4.3-4.4.4139
a,xa,xa,xa,xy,xy,xy,xyyy

Blackberry Browser

710
a,xy

Opera Mobile

101111.111.51212.180
nna,xa,xy,xyy

Chrome for Android

139
y

Firefox for Android

142
y

IE Mobile

1011
yy

UC Browser for Android

15.5
y

Samsung Internet

45.0-5.46.2-6.47.2-7.48.29.210.111.1-11.212.013.014.015.016.017.018.019.0202122232425262728
yyyyyyyyyyyyyyyyyyyyyyyyy

QQ Browser

14.9
y

Baidu Browser

13.52
y

KaiOS Browser

2.53.0-3.1
yy

Back to list

Data copyright caniuse.com