The new radial gradient syntax

Warning This article was written over six months ago, and may contain outdated information.

Back in January I wrote a post explaining the new linear gradient syntax, and promised to return to explain the equivalent for radial gradients when it had been implemented somewhere. That time is now, as the latest preview release of IE10 brings full support for the new syntax — and unprefixed, to boot.

The simplest radial gradient creates a two-colour elliptical gradient which radiates from the centre of the box; you can see it in Radial Example 1, and the code to generate it looks like this:

div { background: radial-gradient(#00F,#FFF); }

If you’d prefer a circular gradient, as shown in Radial Example 2, rather than an elliptical one, just add the circle keyword:

div { background: radial-gradient(circle,#00F,#FFF); }

By default the gradient will radiate out from the center of the box to the corner farthest away from it, but you can change that by using a size value; in Radial Example 3 the closest-side keyword is used:

div { background: radial-gradient(closest-side circle,#00F,#FFF); }

Other acceptable keywords are farthest-corner (the default), farthest-side, and closest-corner. You can also use unit values:

div { background: radial-gradient(25px circle,#00F,#FFF); }

You can change the position of the centre of the gradient by using the at keyword followed by a one or two value position, as in Radial Example 4:

div { background: radial-gradient(farthest-side circle at right,#00F,#FFF); }

If you use only one value, like I just did in my code example, the other is presumed to be center; so the following values would also set the centre of the gradient at the same point (presuming a box 100px square):

div {
  background: radial-gradient(at right center,#00F,#FFF);
  background: radial-gradient(at 100% 50%,#00F,#FFF);
  background: radial-gradient(at 100%,#00F,#FFF);
  background: radial-gradient(at 100px,#00F,#FFF);
}

Really this new syntax is mostly just a rearranged order from the existing radial-gradient, so there isn’t much new to learn; color-stops and repeating radial gradients work in the same way as before.

1 comment on
“The new radial gradient syntax”

  1. […] a fuller explan­a­tion of the new radial-gradient syn­tax at […]