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?

[an error occurred while processing this directive] [an error occurred while processing this directive]
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.

[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]
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.
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?

Tested browsers

[an error occurred while processing this directive]