Until recently each browser implemented CSS radial gradients 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 due to the greater range of options available.

For a linear gradient we can simply specify a starting color, finishing color, and (optionally) a direction. For a radial gradient we must also specify a starting and finishing color, with optional additions of the source location of the gradient will start, where the outer color will stop in the containing element, and the overall shape of the gradient.

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:

div#gradient-example {
	width: 100px;
	height: 250px;
	border: 2px solid #000;
	background-image: radial-gradient(#dbdbdb, #00002b);
}

As you can see, the gradient extends to the inner edge of the shape.

Let’s change the extent of the gradient, and at the same time making a statement about its shape.

div#gradient-example { 
	background-image: radial-gradient(circle closest-side, #dbdbdb, #00002b);
}

For all intents and purposes the gradient stops at the nearest inner edge, filling in the remaining space with the final destination color.

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

The best way to understand these gradients is simply to play around with them, although I will cover the gradient options in more detail in a future article.

You can also use repeating-radial-gradient, as I do in my Pop Art CSS Gradients article… and conical/angle gradients should be coming to the spec soon.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.