Gradients compatibility - desktop

Back to the index.

Introduction to gradients
Detailed mobile table

This is the detailed desktop compatibility table for all sorts of gradients. It’s split into new and middle syntax.

Last major update on 8 March 2013.

This table tests if the browser support either the W3C-approved new syntax, or the -webkit--prefixed middle syntax. Other prefixes do not count.

Believe me, this makes everything a lot easier, and removes a series of unimportant incompatibilities from these tables that would otherwise have commanded too much attention.

First, who uses middle or new syntax?

Selector or declaration IE9 and lower IE10 FF 19 Win FF 19 Mac Safari 6.0.2 Mac Chrome 25 Win Chrome 25 Mac Yandex 1.5.1 Mac Opera 12.14 Win Opera 12.14 Mac
New syntax
No Yes Yes No No Yes
background: linear-gradient(90deg,red 10%,yellow 30%,green 60%);
background: radial-gradient(circle closest-corner at 60% bottom,red 10%,yellow 30%,green 60%);
Middle syntax
-webkit-
No No Yes Yes Incomplete
background: -webkit-linear-gradient(0deg,red 10%,yellow 30%,green 60%);
background: -webkit-radial-gradient(60% bottom,circle closest-corner,red 10%,yellow 30%,green 60%);

Note: what I judge here is compatibility with the -webkit- prefix; not just with any prefix.

  • Opera supports non-repeating linear gradients, and only those, with the -webkit- prefix.
  • (IE supports it with -ms- and Firefox with -moz-, but that doesn’t count here.)

Then the actual compatibility. A browser gets a Yes if it supports one of the two tested syntaxes.

Selector or declaration IE9 and lower IE10 FF 19 Win FF 19 Mac Safari 6.0.2 Mac Chrome 25 Win Chrome 25 Mac Yandex 1.5.1 Mac Opera 12.14 Win Opera 12.14 Mac
Defining the colors of any gradient, in either syntax No Yes Yes Yes Yes Yes
background: -webkit-linear-gradient(0deg,red 10%,yellow 30%,green 60%);
background: linear-gradient(90deg,red 10%,yellow 30%,green 60%);
background: -webkit-radial-gradient(60% bottom,circle closest-corner,red 10%,yellow 30%,green 60%);
background: radial-gradient(circle closest-corner at 60% bottom,red 10%,yellow 30%,green 60%);
Repeating a gradient No Yes Yes Yes Yes Yes
background: -webkit-repeating-linear-gradient(0deg,red 10%,yellow 30%,green 60%,red 80%);
background: repeating-linear-gradient(90deg,red 10%,yellow 30%,green 60%,red 80%);
background: -webkit-repeating-radial-gradient(60% bottom,circle closest-corner,red 10%,yellow 30%,green 60%,red 80%);
background: repeating-radial-gradient(circle closest-corner at 60% bottom,red 10%,yellow 30%,green 60%,red 80%);
Angular definition of the direction of a linear gradient No Yes Yes Yes Yes Yes
background: -webkit-linear-gradient(0deg,red 10%,yellow 30%,green 60%);
background: linear-gradient(90deg,red 10%,yellow 30%,green 60%);

Note: fairly major difference between new and middle syntax.

new angle = 90 - middle angle
middle angle = 90 - new angle

Keywords for determining the direction of a linear gradient No Yes Yes Yes Yes Yes
background: -webkit-linear-gradient(left,red 10%,yellow 30%,green 60%);
background: linear-gradient(to right,red 10%,yellow 30%,green 60%);

Note: fairly major difference between new and middle syntax.

Selector or declaration IE9 and lower IE10 FF 19 Win FF 19 Mac Safari 6.0.2 Mac Chrome 25 Win Chrome 25 Mac Yandex 1.5.1 Mac Opera 12.14 Win Opera 12.14 Mac
Position of the center of a radial gradient No Yes Yes Yes Yes Yes
background: -webkit-radial-gradient(60% bottom,circle closest-corner,red 10%,yellow 30%,green 60%);
background: radial-gradient(circle closest-corner at 60% bottom,red 10%,yellow 30%,green 60%);

Light syntactic differences.

Keywords for determining where the radial gradient ends No Yes Yes Yes Yes Yes
background: -webkit-radial-gradient(60% bottom,circle closest-corner,red 10%,yellow 30%,green 60%);
background: radial-gradient(circle closest-corner at 60% bottom,red 10%,yellow 30%,green 60%);

Light syntactic differences.

Length units for determining where the radial gradient ends No Yes Yes Yes Yes Yes
background: -webkit-radial-gradient(60% bottom,5em 75%,red 10%,yellow 30%,green 60%);
background: radial-gradient(5em 75% at 60% bottom,red 10%,yellow 30%,green 60%);

Note: two values are required in middle syntax, even if they are the same (i.e. the gradient is a circle).

Note: do not mix with shape keywords.

Shape of radial gradient No Yes Yes Yes Yes Yes
background: -webkit-radial-gradient(60% bottom,circle closest-corner,red 10%,yellow 30%,green 60%);
background: radial-gradient(circle closest-corner at 60% bottom,red 10%,yellow 30%,green 60%);

Note: do not mix with size in length units.

Incompatibility in radial gradient syntax No Yes Yes No No No
background: -webkit-radial-gradient(60% bottom,ellipse 5em 75%,red 10%,yellow 30%,green 60%);
background: radial-gradient(ellipse 5em 75% at 60% bottom,red 10%,yellow 30%,green 60%);

Is it allowed to mix shape keywords and size in lengths?

Selector or declaration IE9 and lower IE10 FF 19 Win FF 19 Mac Safari 6.0.2 Mac Chrome 25 Win Chrome 25 Mac Yandex 1.5.1 Mac Opera 12.14 Win Opera 12.14 Mac