Radial-gradient shape

Back to the index.

Introduction to gradients
Detailed desktop table
Detailed mobile table

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