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 21 November 2014.

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

First, who uses middle or new syntax?

Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 33 Win 33 Mac 32 Linux 7 38 Win 38 Mac 37 Linux 26 Win 26 Mac 14.10 Win 14.10 Mac
New syntax
 No Yes Yes Yes Yes Yes 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 Yes Yes 
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.

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

Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 33 Win 33 Mac 32 Linux 7 38 Win 38 Mac 37 Linux 26 Win 26 Mac 14.10 Win 14.10 Mac
Color stops
Defining the colors of any gradient, in either syntax 		No bug Yes Yes Yes Yes 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%);
  • In IE the color stops are off. The IE team confirmed this is a bug for angle keywords in non-square boxes and is working on a fix.
Repeating
Repeating a gradient 		No Yes Yes Yes Yes Yes Yes 
background: repeating-linear-gradient(90deg,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 Yes 
background: linear-gradient(90deg,red 10%,yellow 30%,green 60%);
Linear keywords
Keywords for determining the direction of a linear gradient 		No Yes Yes Yes Yes Yes Yes 
background: linear-gradient(to right,red 10%,yellow 30%,green 60%);
Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 33 Win 33 Mac 32 Linux 7 38 Win 38 Mac 37 Linux 26 Win 26 Mac 14.10 Win 14.10 Mac
Position
Position of the center of a radial gradient 		No Yes Yes Yes Yes Yes Yes 
background: radial-gradient(circle closest-corner at 60% bottom,red 10%,yellow 30%,green 60%);
Radial keywords
Keywords for determining where the radial gradient ends 		No Yes Yes Yes Yes Yes Yes 
background: radial-gradient(circle closest-corner at 60% bottom,red 10%,yellow 30%,green 60%);
Size length
Length units for determining where the radial gradient ends 		No Yes Yes Yes Yes Yes Yes 
background: radial-gradient(5em 75% at 60% bottom,red 10%,yellow 30%,green 60%);

Note: do not mix with shape keywords.
Shape
Shape of radial gradient 		No Yes Yes Yes Yes Yes Yes 
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 No No No No No 
background: radial-gradient(ellipse 5em 75% at 60% bottom,red 10%,yellow 30%,green 60%);

Is mixing shape keywords and size allowed in lengths?

Tested browsers

Desktop browser test array 2.0.3; November 2014

IE7 and lower
I removed them, so they’re not tested for newer methods and properties that they don’t support anyway. However, I copy all information from older versions of the Tables.
If IE8 supports a method or property I never tested before I have to guess if IE7 and lower also support it. In general I assume they support the Microsoft-invented properties, but for others I will occasionally have to add a "Don’t know" entry. If IE8 does not support something I never tested before, I assume IE7 and lower also don’t support it.
IE 8, 9, and 10
Trident
On separate Windows 7 virtualizations
IE11
Trident
On Windows 8.1 virtualization
On Surface
Firefox
Gecko 33/32
33 on Win7 and Mac; 32 on Linux (can’t update)
Safari
WebKit
7.0.5 on Mac
Chrome
Chromium 38/37
38 on Win7 and Mac; 37 on Linux (can’t update)
Opera 26
Chromium 38
26.0 on Win7 and Mac
Yandex 14.10
Chromium 37
14.10 on Win7
14.10 on Mac

Operating systems

Mac
MacBook Pro 17'' with OS 10.9.4
This is my main test station. It also runs all virtual Windows systems.
Windows
All downloaded from modern.ie. I use VirtualBox, and downloded the Windows 7 systems for all browsers but IE11, which runs on Windows 8.1.
The non-IE Windows browsers all run on the IE9/Win7 virtualization.
Surface
Microsoft Surface with Windows RT 8.1
Linux
Ubuntu 12.04 on pretty old hardware. Not fair for performance comparisons.