I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Basic CSS Circular Radial Gradients

css / gradients

Estimated reading time: 1 minute, 49 seconds

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 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 CSS3 Gradients article… and conical/angle gradients should be coming to the spec soon.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.