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.
[…] a fuller explanation of the new radial-gradient syntax at […]
Gradients: New Radial Syntax, IE10 Unprefixes | The Book of CSS3 [June 26th, 2012, 13:09]