CSS - Gradients compatibility

Gradients compatibility - mobile

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

Last major update on 26 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?

	iOS	Android	Chromium	UC	BlackBerry	Nokia Xpress	UC Mini	Opera	Nintendo	Dolphin	IE	Firefox
7	8	2	4	Sa	Puf	Cy	Xia	Op	Go	9	10	6	7	10	Mini	Classic	9	10	11	And	OS
New syntax	Yes	No	Yes	No	No	No	Yes	No	No	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-	Yes	No	Yes	Yes	Yes	No	Yes	No	Incomplete	No	No	Yes	No
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 Classic supports non-repeating linear gradients, and only those, with the `-webkit-` prefix. Android 4.0 supports old(?) syntax, and not middle syntax, for radial gradients. Android 4.1 does it right. IE11 on Windows Phone (and only Windows Phone) supports this.

iOS

Android

Chromium

BlackBerry

Nokia Xpress

UC Mini

Opera

Nintendo

Dolphin

Firefox

Puf

Xia

Mini

Classic

And

New syntax

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-

Yes

Incomplete

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.

Opera Classic supports non-repeating linear gradients, and only those, with the -webkit- prefix.
Android 4.0 supports old(?) syntax, and not middle syntax, for radial gradients. Android 4.1 does it right.
IE11 on Windows Phone (and only Windows Phone) supports this.

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

Android 4.0 note: it gives wrong results with radial middle syntax. I assume it’s using old WebKit syntax, but I don’t have tests for them. Android 4.1 does everything right.

Puffin note: it supports everything, but seems to treat every gradient as an image, and a slow-loading one at that. Apparently gradients are created on the server and sent over to the client really slowly.

	iOS	Android	Chromium	UC	BlackBerry	Nokia Xpress	UC Mini	Opera	Nintendo	Dolphin	IE	Firefox
7	8	2	4	Sa	Puf	Cy	Xia	Op	Go	9	10	6	7	10	Mini	Classic	9	10	11	And	OS
Color stops Defining the colors of any gradient, in either syntax	Yes	-	Yes	Yes	slow	Yes	Yes	-	Yes	-	Yes	-	bug	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%); 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	Yes	-	Yes	Yes	slow	Yes	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	Yes	-	Yes	Yes	slow	Yes	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	Yes	-	Yes	Yes	slow	Yes	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.
	iOS	Android	Chromium	UC	BlackBerry	Nokia Xpress	UC Mini	Opera	Nintendo	Dolphin	IE	Firefox
7	8	2	4	Sa	Puf	Cy	Xia	Op	Go	9	10	6	7	10	Mini	Classic	9	10	11	And	OS
Position Position of the center of a radial gradient	Yes	-	Yes	Yes	slow	Yes	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. Old note: from Android WebKit 4.1 on.
Radial keywords Keywords for determining where the radial gradient ends	Yes	-	Yes	Yes	slow	Yes	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. Old note: from Android WebKit 4.1 on.
Size length Length units for determining where the radial gradient ends	Yes	-	Yes	Yes	slow	Yes	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. Old note: I think Android 4.0 uses the first size to determine the size of their circle, and ignore the second one.
Shape Shape of radial gradient	Yes	-	Yes	Yes	slow	Yes	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. Old note: Android 4.0 does not support `ellipse`; only `circle`. If you explicitly define `circle` everything is fine, but if you don’t it uses circles nonetheless and does other things wrong, too.
Shape and size Incompatibility in radial gradient syntax	No	-	No	No	No	-	No	-	No	-	Yes	No	Yes
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 mixing shape keywords and size allowed in lengths?
	iOS	Android	Chromium	UC	BlackBerry	Nokia Xpress	UC Mini	Opera	Nintendo	Dolphin	IE	Firefox
7	8	2	4	Sa	Puf	Cy	Xia	Op	Go	9	10	6	7	10	Mini	Classic	9	10	11	And	OS

iOS

Android

Chromium

BlackBerry

Nokia Xpress

UC Mini

Opera

Nintendo

Dolphin

Firefox

Puf

Xia

Mini

Classic

And

Color stops

Defining the colors of any gradient, in either syntax

Yes

slow

Yes

bug

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%);

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

Yes

slow

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

Yes

slow

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

Yes

slow

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.

iOS

Android

Chromium

BlackBerry

Nokia Xpress

UC Mini

Opera

Nintendo

Dolphin

Firefox

Puf

Xia

Mini

Classic

And

Position

Position of the center of a radial gradient

Yes

slow

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.

Old note: from Android WebKit 4.1 on.

Radial keywords

Keywords for determining where the radial gradient ends

Yes

slow

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.

Old note: from Android WebKit 4.1 on.

Size length

Length units for determining where the radial gradient ends

Yes

slow

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.

Old note: I think Android 4.0 uses the first size to determine the size of their circle, and ignore the second one.

Shape

Shape of radial gradient

Yes

slow

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.

Old note: Android 4.0 does not support ellipse; only circle. If you explicitly define circle everything is fine, but if you don’t it uses circles nonetheless and does other things wrong, too.

Shape and size

Incompatibility in radial gradient syntax

Yes

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 mixing shape keywords and size allowed in lengths?

iOS

Android

Chromium

BlackBerry

Nokia Xpress

UC Mini

Opera

Nintendo

Dolphin

Firefox

Puf

Xia

Mini

Classic

And

Tested browsers

Mobile browser test array 2.0.3; November 2014

Version 2.x has quite a few changes from 1.3; see my notes.

iOS 7

WebKit 537

Default browser on iPad 2 with iOS 7.1.2

iOS 8

WebKit 600

Default browser on iPhone 4S with iOS 8.1

Android 2

WebKit 533

Default browser on HTC Legend, Android 2.2

Default browser on Samsung Galaxy Pocket, Android 2.3.6

Default browser on Sony Reader PRS-T3. I’ve heard it’s Android 2-based, but of course it’s nearly impossible to get some actual information.

Android 4

WebKit 534

Default browser on Huawei C8813, Android 4.1.1

Default browser on Samsung Galaxy Note I, Android 4.1.2

Default browser on Sony Xperia S, Android 4.1.2

Default browser on LG L5, Android 4.1.2

Default browser on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)

Default browser on HTC One X, Android 4.2.2

Default browser on HTC M8, Android 4.4.2

Chromium Samsung

Blink; Chromium 28

Default browser on Samsung Galaxy S4, Android 4.4.2

This is Samsung’s Chrome.

Chromium Puffin

Blink; Chromium 30

Possibly proxy-ish browser; doesn’t make connection to my internal server, but does do some stuff client-side.

4.0 Free Edition on Samsung Galaxy Note, Android 4.1.2

Chromium Cyanogen

Blink; Chromium 33

Default browser on Galaxy Nexus flashed with Cyanogenmod 11, Android 4.4.4

This is Cyanogen’s Chrome.

Chromium Xiaomi

Blink; Chromium 34 or 35; see this blog post

Default browser on Xiaomi M2, Android 4.1.1

Chromium Opera

Blink; Chromium 38

25 on LG L5, Android 4.1.2

25 on HTC M8, Android 4.4.2

This is Opera Mobile.

Chromium Google

Blink; Chromium 38

Default browser on Nexus 7, Android 4.4.2

Default browser on Motorola Moto G, Android 4.4.4

This is Google’s regular Chrome. I test it only on devices where it is the default browser.

UC 9

WebKit 534

UC 9.9.5 on Huawei C8813, Android 4.1.1

UC 9.9.6 on Xiaomi M2, Android 4.1.1

The largest Chinese browser. This is the full Chinese variant, not the proxy. These browsers were pre-installed (next to Android WebKit; don’t ask me why).

UC 10

UC 10.0 on Samsung Galaxy S4, Android 4.4.2

This is an English install. I don’t know if that matters, but it could.

BlackBerry 6

WebKit 534

Default browser on BB Torch 9800 (OS6)

BlackBerry 7

WebKit 534

Default browser on BB Torch 9810 (OS7)

BlackBerry 10

WebKit 537

Default browser on BlackBerry Z10 (BB OS 10.1)

A new BB10 version has been released, but my device cannot connect to the update server.

This device has 1GB of internal memory instead of the customary 2GB, which may matter in performance tests.

Nokia Xpress

Gecko 20100401; this version was used for some Firefoxes from 3 to 4.

Proxy browser

5.5 on the Nokia Asha 311, S40.

UC Mini

Gecko; don’t know version number

Proxy browser

8.8 on HTC One X, Android 4.2.2

9.4 on Motorola Moto G, Android 4.4.2

9.4 on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)

Opera Mini

Presto

Proxy browser

7.6 on Samsung Galaxy S4, Android 4.4.2

8.0 on BB Torch 9800 (OS6)

8.0.3 on iPad 2, iOS 7.1.2

Opera Classic

Presto

12.10 on Samsung Galaxy Pocket, Android 2.3.6

Nintendo

WebKit 536

Nintendo browser 3.0.3 on Wii U (OS version unfindable)

Supposed to be based on NetFront, which in turn is WebKit-based nowadays.

Dolphin

WebKit 534

Dolphin 11.23 with JetPack on Sony Xperia S, Android 4.1.2.

Independent full browser for Android, as long as you install both Dolphin and the Jetpack extension.

IE9

Trident

Default browser on Nokia Lumia 800, Windows Phone 7.5.

IE10

Trident

Default browser on Nokia Lumia 520, Windows Phone 8.0.

IE11

Trident

Default browser on Nokia Lumia 820, Windows Phone 8.1 “Update”

This is a developer phone. That might matter.

Firefox Android

Gecko 33

33 on LG L5, Android 4.1.2

33 on Samsung Galaxy S4, Android 4.4.2

Firefox OS

Gecko 28

Default browser on T2Mobile Flame, the FFOS reference device. 1.3.0 prerelease

Wolfgang AT-AS45FW note: Wolfgang is a Dutch importer and re-brander of phones. In this particular case they seem to have bought Chinese (? probably) phones, re-branded them, then re-sold them to the Whoop company, which re-branded them and sold them to the Hema chain of supermarkets, which sells them to consumers as the Whoop Echo. Supply chain management FTW!