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:

image0.png
background: -moz-radial-gradient(center, ellipse cover, rgba(228,245,252,1) 0%, rgba(191,232,249,1) 50%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(228,245,252,1)), color-stop(50%,rgba(191,232,249,1)), color-stop(51%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* W3C */

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:

image1.png

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.

image2.png

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.

image3.png

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:

.background {
/* IE10 Consumer Preview */ 
background-image: -ms-radial-gradient(center, circle closest-side, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center, circle closest-side, #FFFFFF 0%, #00A3EF 100%);
/* Opera */ 
background-image: -o-radial-gradient(center, circle closest-side, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center center, 0, center center, 140, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center, circle closest-side, #FFFFFF 0%, #00A3EF 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: radial-gradient(circle closest-side at center, #FFFFFF 0%, #00A3EF 100%);
}

And then, you can apply the background to any element in your HTML file. Here, the background is applied to a <div> tag:

<div class="background">
(content here)
</div>
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com