Radial Gradients, or, How I Learned to Stop Worrying And Love Webkit

CSS3 introduces new ways to utilize current-day desktop graphics power, and one of these is the ability to render radial-style gradients (as well as other gradients, too). Of course, as with any new web technology, it’s not always intuitive or easy to pick up right off the bat. There are many different effects that can be achieved with radial gradients. Here are a few interesting techniques you can check out.

The Easy Way: CSS3 Gradient Generators

Sometimes you just want to get it done and not poke around at values to get things exact. I understand – maybe it’s a time crunch, or work that doesn’t require precision, or maybe it’s just laziness settling in. For these situations, there’s the excellent Radial Gradients Generator by John Allsopp. This online tool allows for great control with relative ease (be warned, it crashes in Chrome 13 for me. Try it in Safari).

Circular Gradients

The easiest and most straightforward method for radial gradients is the circular variety. With the standard format, you get an X-Y point, an adaptive radius, and easy-to-use color stop formatting. Let’s give it a try.

background-image: -webkit-radial-gradient(50% 50%, circle, #000000, #FF00FF);

You can specify how far the gradient goes by putting a size after the shape, like this:

background-image: -webkit-radial-gradient(10% 50%, circle farthest-corner, #000000, #FF00FF);

For a more complete example, see my example, Cloud 9 IDE Logo in CSS which uses radial gradients liberally.

Resources and Links