Radial-gradient position

Back to the index.

Introduction to gradients
Detailed desktop table
Detailed mobile table

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