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 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 iOS Android Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 Chr Mini Mob 12 Mob 14 6 7 PB 10 Xpress MeeGo Anna Belle 9 10
New syntax
No No No Incomplete No No No 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%);
  • Opera Mobile 12.10 Android supports it. Opera Mobile 12.00 Symbian does not.
Middle syntax
-webkit-
Yes No Incomplete Yes No Incomplete Yes No Yes No Yes 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 Mobile 12.10 Android supports non-repeating linear gradients, and only those, with the -webkit- prefix. (12.00 Symbian supports nothing.)
  • Android 4.0 supports old(?) syntax, and not middle syntax, for radial gradients. Android 4.1 does it right.

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

Android 4 note: Android 4.0 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.

Selector iOS Android Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 Chr Mini Mob 12 Mob 14 6 7 PB 10 Xpress MeeGo Anna Belle 9 10
Defining the colors of any gradient, in either syntax Yes No Yes No Yes No Yes No Yes No Yes No 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 Yes No Yes No Yes No Yes No Yes No Yes No 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 No Yes No Yes No Yes No Yes No Yes No 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 No Yes No Yes No Yes No Yes No Yes No 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 iOS Android Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 Chr Mini Mob 12 Mob 14 6 7 PB 10 Xpress MeeGo Anna Belle 9 10
Position of the center of a radial gradient Yes No 4.1 Yes No Yes No Yes No Yes No Yes No 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 Yes No 4.1 Yes No Yes No Yes No Buggy No Yes Buggy No 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.

  • Something’s wrong in Android 4.0, Symbian Belle, and Tizen.
Length units for determining where the radial gradient ends Yes No 4.1 Yes No Yes No Yes No Buggy No Yes Buggy No 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.

  • I think Android 4.0, Symbian Belle, and Tizen use the first size to determine the size of their circle, and ignore the second one.
Shape of radial gradient Yes No 4.1 Yes No Yes No Yes No Buggy No Yes Buggy No 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.

  • Android 4.0, Symbian Belle, and Tizen do 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 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 it allowed to mix shape keywords and size in lengths?

Selector iOS Android Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox
5 6 2 3 4 Chr Mini Mob 12 Mob 14 6 7 PB 10 Xpress MeeGo Anna Belle 9 10

Tested browsers

Mobile browser test array 1.0.3; March 2013

iOS 5
WebKit 534
Default browser on iPad 2 with iOS 5.1.1
iOS 6
WebKit 536
Default browser on iPhone 4S with iOS 6.1.1
Android 2
WebKit 533
Default browser on HTC Legend, Android 2.2
Default browser on LG Optimus something, Android 2.2
Default browser on Sony Xperia S, Android 2.3.7
Android 3
WebKit 534
Default browser on Packard Bell tablet, Android 3.2.1
Android 4
WebKit 534
Default browser on HTC One X, Android 4.1.1
Default browser on Samsung Galaxy Note I, Android 4.0.3
Chrome
WebKit 535
18 on Nexus 7, Android 4.2.1
Opera Mini
Presto
Proxy browser
7.5 on Samsung Galaxy Note I, Android 4.0.3
7.1 on BlackBerry 9800 (OS6)
7.1 on Nokia E71 (SymbianOS/9.2)
7.0.5 on iPad 2, iOS 5.1.1
Opera Mobile 12
Presto
12.10 on HTC One X, Android 4.1.1
12.00 on Nokia E7, Symbian Anna
Opera Mobile 14
WebKit 537
14.0 on Sony Xperia S, Android 2.3.7
BlackBerry 6
WebKit 534
Default browser on BB Torch 9800 (OS6)
BlackBerry 7
WebKit 534
Default browser on BB Torch 9810 (OS7)
BlackBerry PB
WebKit 536
Default browser on PlayBook with OS 2.1.0
BlackBerry 10
WebKit 537
Default browser on Dev Alpha A device with OS 10.0.9
Xpress
Gecko
Proxy browser
2.3 on the Nokia Asha 311, S40.
This browser used to be called Ovi. Nokia developed it because it saw how succesful Opera was on Nokia’s own devices.
MeeGo
WebKit 534
Default browser on Nokia N950, MeeGo Harmattan 1.2
Originally slated as Symbian’s successor, MeeGo was ousted in favour of Windows Phone. Some devices were sold, however, and a Finnish company is trying to re-start MeeGo under the name Sailfish. And who knows? Ex-Nokia people have good operator contacts.
Anna
WebKit 533
Default browser on Nokia E7, Symbian Anna
The next-to-last Symbian build. I don’t think it was the prime Symbian build for long; it was replaced by Belle fairly soon. But it’ll be in some people’s pockets.
Belle
WebKit 535
Default browser on Nokia PureView 808, Symbian Belle SP2
The most recent Symbian build.
UC
WebKit 533
UC 8.6.1 on Packard Bell tablet, Android 3.2.1.
The largest Chinese browser. I’m testing the full variant, not the proxy.
NetFront
WebKit 530
NetFront Life 2.3.1 on Sony Xperia S, Android 2.3.7
NetFront, by the Japanese Access company, used to be big on proprietary Samsung and Sony Ericsson systems. It is now switching to WebKit from their own rendering engine, and to the gaming device and TV markets.
Dolphin
WebKit 534
Beta 1.3.1 on Samsung Galaxy Note I, Android 4.0.3.
Independent full browser for Android. The non-beta is a skin over the Android default browser. The beta uses their own WebKit port.
One
WebKit 534
3.5.2 on HTC One X, Android 4.1.1
Formerly QQ browser by the Chinese company TenCent. Domestic competitor of UC.
Tizen
WebKit 537
Default browser on Lunchbox prototype by Intel, Tizen 2.0.0a3
Tizen is an OS jointly being developed by Samsung and Intel. I expect Samsung to start producing devices this year, and it will get a few percent of market share.
IE9
Trident
Default browser on Nokia Lumia 800, Windows Phone 7.
IE10
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.
Firefox
Gecko
18 on HTC One X, Android 4.1.1

General note on One, NetFront, and UC: the browsers I test are not particularly representative for the actual browsers that are used in the wild. Though some may be default browsers on Asian Android devices, most of them get their market share from being pre-installed on feature phones or game consoles.I’m working on getting more representative test devices.

Browsers by WebKit version:

530
NetFront
533
Android 2
Anna
UC
534
iOS5
Android 3 and 4
BlackBerry 6 and 7
MeeGo
Dolphin
One
535
Chrome
Belle
536
iOS6
BlackBerry PlayBook
537
Opera Mobile 14
BlackBerry 10
Tizen