There are some incompatibilities in the interaction between shape and size of radial gradients.
What happens when shape and length contradict each other, like a 5em 5em ellipse? It really is a circle, after all. Turns out that combining an explicit shape with a length value is not supported universally.
background: -webkit-radial-gradient(60% 70%,ellipse 5em,red,yellow,green); background: radial-gradient(ellipse 5em at 60% 70%,red,yellow,green);
What if you have a 5em 5em ellipse? It’s really a circle.
New syntax
Middle syntax
background: -webkit-radial-gradient(60% 70%,circle 5em 4em,red,yellow,green); background: radial-gradient(circle 5em 4em at 60% 70%,red,yellow,green);
Similarly, a 5em 4em circle would really be an ellipse.
New syntax
Middle syntax
background: -webkit-radial-gradient(60% 70%,circle 50px 50px,red,yellow,green); background: radial-gradient(circle 50px 50px at 60% 70%,red,yellow,green);
But even with valid ones like circle 50px 50px there are problems.
New syntax
Middle syntax