The position of a radial gradient is the point at which the radial starts; i.e. the centre of the ellipse or circle.
You can use either keywords or length units to give the position; similar to background-position. If you use lengths horizontal comes first, then vertical. Omitted keywords are assumed to be center.
There’s one difference between middle and new syntax: the new syntax requires you to use the keyword at before the position. Otherwise the two syntaxes are the same.
background: -webkit-radial-gradient(top,red,yellow,green); background: radial-gradient(at top,red,yellow,green);
With top he radial starts at the top. The omitted horizontal keyword is assumed to be center.
none
webkit
background: -webkit-radial-gradient(bottom left,red,yellow,green); background: radial-gradient(at bottom left,red,yellow,green);
This one starts at the bottom left corner.
none
webkit
background: -webkit-radial-gradient(60%,red,yellow,green); background: radial-gradient(at 60%,red,yellow,green);
The 60% is interpreted as 60% center.
none
webkit
background: -webkit-radial-gradient(60% 40px,red,yellow,green); background: radial-gradient(at 60% 40px,red,yellow,green);
This one starts at 60% horizontal and 40px vertical.
none
webkit
background: -webkit-radial-gradient(60% bottom,red,yellow,green); background: radial-gradient(at 60% bottom,red,yellow,green);
Combining lengths and keyword works.
none
webkit
background: -webkit-radial-gradient(right 60%,red,yellow,green); background: radial-gradient(at right 60%,red,yellow,green);
However, horizontal must come first. This example works, but 60% right would not.
none
webkit