A radial gradient can have two shapes: circle or ellipse. The default is ellipse.
If a radial gradient has the same horizontal and vertical size it automatically becomes a circle. Unfortunately there are some incompatibilities in the interaction between shape and size.
background: [-prefix-]radial-gradient(circle at 60% 70%,red,yellow,green);
By adding the circle keyword the gradient becomes a circle.
New syntax
Middle syntax
background: -webkit-radial-gradient(60% 70,ellipse,red,yellow,green); background: radial-gradient(ellipse at 60% 70%,red,yellow,green);
You may add the ellipse keyword explicitly, but it’s also the default, so it’s not required.
New syntax
Middle syntax
background: -webkit-radial-gradient(60% 70%,circle farthest-corner,red,yellow,green); background: radial-gradient(circle farthest-corner at 60% 70%,red,yellow,green);
Combining shape and size is of course allowed.
New syntax
Middle syntax
background: -webkit-radial-gradient(60% 70%,5em 5em,red,yellow,green); background: radial-gradient(5em at 60% 70%,red,yellow,green);
And size in length units is also allowed. Also, if you use one size, even an ellipse becomes a circle. Just remember that middle syntax requires two length values.
New syntax
Middle syntax