Online Resources for Generating CSS3 Gradients

The ability to generate complex gradient blends is one of the really dramatic improvements in CSS3. Until the advent of CSS3, designers relied on tiled image files to create textured backgrounds behind pages and design elements (like <div> tags). Those image files slowed down pages, and looked tacky when they slowly downloaded into pages a user had open.

That’s the good news.

The drawback is that defining the syntax for even a simple linear gradient is a hassle because different browsers have different syntax for defining even these simple gradients. And when it comes to defining diagonal or radial gradients, the differences between browser syntax become even more glaring.

Just to give a sense of this, examine the CSS required to produce the background image in the figure below:

So, what is a poor designer to do? Luckily there are several really useful CSS gradient generators online. Here are three of the best:

ColorZilla’s Ultimate CSS Gradient Generator

Probably the most powerful of the CSS3 gradient generators, the Ultimate CSS Gradient Generator lets designers define gradients with sliders that will feel comfortable to anyone who has defined a gradient in Illustrator, CorelDraw or other drawing programs, shown here:

The Ultimate CSS Gradient Generator also provides options for generating SVG images that will be recognized in Internet Explorer 9 (which has limited support for CSS3 gradients).

CSS3 Gradient Generator

The CSS3 Gradient Generator, created by Damian Galarza, has a few less features than the Ultimate CSS Gradient Generator, but a very clean, accessible interface makes it easy to create basic linear and diagonal blends, while watching CSS code appear in the screen.

This resource is especially handy for creating gradient background for buttons since the preview window is a nice, clean pre-configured button-sized square.

CSS Gradient Background Maker

Some dudes in a garage up near Seattle put up an easy-to-use and powerful CSS3 gradient generator they call the CSS Gradient Background Maker. They’ve got an alternative start-up they call Microsoft, and the gradients you generate here work in — yes, Internet Explorer (versions 10 and later), but also all other current browers.

The CSS Gradient Background Maker might be the fastest way to create gradients of the bunch as it comes with over a dozen pre-sets.

How CSS3 Gradient Generators Work

All three of the CSS3 gradient generators listed here, and others as well, create chunks of CSS3 code that designers can copy and paste into CSS files. They generators do not provide a lot of help in how to do that — they expect you to be able to handle defining CSS3 backgrounds for elements and class and div selectors in a CSS file.

But the process is not too hard. For example, if you create a class style and name it .background, you can copy and paste a gradient style into that selector as shown here: