Until recently each browser implemented radial gradients in CSS3 in slightly different ways; finally, the specification has been shaken out to a single, shared standard. Obviously, the specification for radiant gradients is more complicated because of the greater range of options available to a range of colors going in all directions, rather than a single linear direction.

For a linear gradient we can simply specify a starting color, finishing color, and a direction. For a radial gradient we must specify a location that the gradient will start, a shape (circle or ellipse), where the outer color will stop on the containing element (more on that in a moment) and a starting and finishing color.

First, let’s keep things simple with a div of a fixed dimension with no content. To that, let’s apply a simple radial gradient from white to a dark blue, as a class, just for Chrome and Safari to keep the code light:

1. <style>
2. div#gradient-example { width: 100px; height: 250px;
3. border: 2px solid #000;
4. background-image: -webkit-radial-gradient(50% 50%, circle closest-side,
5. #dbdbdb, #00002b); }
6. </style>
8. <div id="gradient-example”></div>

As you can see, we specify the starting position of the gradient in standard CSS way: the horizontal position, followed by the vertical. Let’s move that, and at the same time change where the outer color stops. (To save space, I’m not going to repeat the other properties and values, which will remain unchanged):

1. div#gradient-example {
2. background-image: -webkit-radial-gradient(90% 90%, circle farthest-corner,
3. #dbdbdb, #00002b);}

As you can see from the example, the center of the gradient has moved to the bottom right hand corner (I could also use a mix of any other CSS measurement system for positioning) while the gradient itself stretches all the way across the element, to the furthest corner.

There are many other possibilities for sizing and stretching the gradient: closest-side, closest-corner, farthest-side and farthest-corner.

The best way to understand these gradients is simply to play around with them. Don’t forget to include all the vendor prefixes to cover every browser! To complete our example above, they would be:

1. div#gradient-example {
2. background-image: -webkit-radial-gradient(90% 90%, circle farthest-corner,
3. #dbdbdb, #00002b);
4. background-image: -o-radial-gradient(90% 90%, circle farthest-corner,
5. #dbdbdb, #00002b);
6. background-image: -moz-radial-gradient(90% 90%, circle farthest-corner,
7. #dbdbdb, #00002b);
8. background-image: -ms-radial-gradient(90% 90%, circle farthest-corner,
9. #dbdbdb, #00002b);
10. background-image: radial-gradient(90% 90%, circle farthest-corner,
11. #dbdbdb, #00002b);
12. }

You can also use repeating-radial-gradient, as I do in my Pop Art CSS3 Gradients article… and conical/angle gradients should be coming to the spec soon. I’ll provide more advanced examples in future articles.