In addition to keywords you can also use length units to give the size of a radial gradient.
Horizontal size comes first, then vertical. Both are required in middle syntax. In new syntax one length is allowed, which causes the gradient to become a circle (same width and height). Single percentages are not allowed, however. (What does “45%” mean? Width or height?)
There are some incompatibilities in the interaction between shape and size.
background: -webkit-radial-gradient(center,60% 40%,red,yellow,green); background: radial-gradient(60% 40% at center,red,yellow,green);
The size is 60% horizontal, 40% vertical.
New syntax
Middle syntax
background: -webkit-radial-gradient(center,70% 100px,red,yellow,green); background: radial-gradient(70% 100px at center,red,yellow,green);
Mixing percentages and pixels is allowed...
New syntax
Middle syntax
background: -webkit-radial-gradient(center,5em 30px,red,yellow,green); background: radial-gradient(5em 30px at center,red,yellow,green);
...as is mixing ems and px.
New syntax
Middle syntax
background: -webkit-radial-gradient(center,50px,red,yellow,green);background: radial-gradient(50px at center,red,yellow,green);
In new syntax the 50px is expanded to 50px 50px, and a 50px-radius circle is born. However, this does not work in middle syntax, which requires two values.
New syntax
Middle syntax
background: -webkit-radial-gradient(center,45%,red,yellow,green); background: radial-gradient(45% at center,red,yellow,green);
Single percentages do not work even in new syntax.
New syntax
Middle syntax