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
Color stops
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
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%);
Angles
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
Linear keywords
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
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.
Radial keywords
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.
Size length
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
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.
Shape and size
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