Gradients compatibility - mobile

Back to the index.

Introduction to gradients
Detailed desktop table

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.

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

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 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.
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.
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 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.
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

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!