The size keywords tell the radial gradient where the farthest radius should be; i.e. the place where the last colour becomes fully saturated.
This can be at the closest or farthest side or corner. The default is farthest-corner. If you need a more specific size, use length units instead of keywords.
background: -webkit-radial-gradient(30% 40%,closest-side,red,yellow,green); background: radial-gradient(closest-side at 30% 40%,red,yellow,green);
The full green occurs at the closest side; the top one.
New syntax
Middle syntax
background: -webkit-radial-gradient(30% 40%,closest-corner,red,yellow,green); background: radial-gradient(closest-corner at 30% 40%,red,yellow,green);
The full green occurs in the closest corner; the top left one.
New syntax
Middle syntax
background: -webkit-radial-gradient(30% 40%,farthest-side,red,yellow,green); background: radial-gradient(farthest-side at 30% 40%,red,yellow,green);
The full green occurs at the farthest side; the right one.
New syntax
Middle syntax
background: -webkit-radial-gradient(30% 40%,farthest-corner,red,yellow,green); background: radial-gradient(farthest-corner at 30% 40%,red,yellow,green);
The full green occurs in the farthest corner; the bottom right one.
New syntax
Middle syntax