Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

by thehodge • 16 years ago

198 21 16 years ago

robgough• 16 years ago

Really impressive. You can add more gradient points by clicking where you'd like the new colour to start, and you can remove by "dragging" them off.

I'm sure I'll make use of this.

Imagenuity• 16 years ago

It looks great on Chrome and IE8, however Firefox 3.6.10 has repeating bands all down the screen. Example at: http://www.imagenuity.com/

ez77• 16 years ago

What do you plan to do with imagenuity.com? Just curious.

wenbert• 16 years ago

Nice. Thanks!

This will save me some time in Photoshop and experimenting what color step to choose next for a good gradient.

sushi• 16 years ago

I tend to bypass making mockups in photoshop when I design a webpage. This will be particularly helpful to come up with gradients quickly to color the elements in CSS.

I believe it's the only web service of its kind as of now. Pretty cool.

pxlpshr• 16 years ago

wow this is awesome!!! bookmarking to my tools.

here's another one I use frequently. http://css3generator.com

astrofinch• 16 years ago

Mind sharing the rest of your tools? :-P

gmurphy• 16 years ago

I'm currently knee-deep in CSS gradient generation, so this is very welcome.

It would be nice if there was a way to shift all the colors in a gradient simultaneously - for hover effects, you frequently just want a slightly lighter version of the same gradient. In Photoshop you'd do this with an adjustment layer (which still isn't perfect).

kevin_morrill• 16 years ago

I totally agree. I would pay money easily for a site that does this + lightness and hue adjustment relative to a current gradient.

Tichy• 16 years ago

I suppose the idea behind gradients is that they mimic the sky and hence have a soothing effect, or something like that?

How accepted are gradients among designers?

Asking because I am starting to hate some aspects of modern web design. Today I had this thought that maybe I just don't like it if a web site design lies to me. That is, a web site is a flat thing, it shouldn't pretend to be 3d with fake shadows and stuff like that.

I see the need for making buttons clickable ("afford pushing " was the term one design book used, I think).

mcav• 16 years ago

In graphic design, gradients are generally frowned upon, primarily because they tend to be excessive and distract from the meaning of the images. In web design, there are legitimate uses for subtle gradients to add a subtle 3D effect. As with anything else, trends come and go; right now, subtle gradients and 1px highlights are in; take a look at the iPhone UI for inspiration.

zachrose• 16 years ago

A computer screen is like a perfectly precise lightbox.

Gradients are tacky in print because they were expensive to execute on paper. ("Tacky" here used to mean counter to the Modernist dogma of purity, precision, truth, and generally "going with the grain" of a medium that dominated a large part of the late 20th century. YMMV.)

On a screen, gradients are not only beautiful, but useful in creating the perky faux-physics that have come to dominate almost all of consumer UI design. Part of this may be rooted in the measurable "effectiveness" of illusionistic UIs, but I have the sense that it's also about wanting desktop computers to be a cute little robots.

Also: grade.tumblr.com

perezd• 16 years ago

Ultimate CSS Gradient Generator? Try using Compass (www.compass-style.org) They have mixins and color calculation functions builtin that make this a trivial 1 line of code thing to do, in Sass. It even generates supported directives for all browsers that currently have support for gradients.

cmykgrayscale• 16 years ago

what would be nice is if this generator also created compass code.

morganpyne• 16 years ago

Agreed, spent the last couple of days doing exactly that with Compass/SCSS and to be honest I hate the thoughts of ever having to hand-code CSS anymore.

A couple of snags I did find with Compass and gradients (and SASS/SCSS specifically) is that 1) it doesn't support multiple backgrounds curently e.g. adding an image and layering an RGBA gradient on top of it. It's not widely supported by browsers anyway but it can be used to great effect. 2) the mixins currently assume that you are using your gradients as backgrounds only but they can be used in other ways.

Despite these minor hiccups you're still far better off using Compass/SCSS for your styles than doing it by hand, and the author Chris Epstein is incredibly responsive and helpful.

mrpollo• 16 years ago

Thanks man, awesome tool :)

alanh• 16 years ago

Unfortunately the single-color "old browsers" fallback will also be used for IE9.

May I suggest also generating SVG to use for the background in IE9 and Opera?

olalonde• 16 years ago

The presets are actually much better than Photoshop's ones.

lambda• 16 years ago

"As you might know, HTML5 introduced many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3..."

Er, no. HTML5 did not introduce the gradient feature. CSS3 introduced the feature (inspired by an implementation in WebKit). This has nothing to do with HTML5, though people these days seem to like using that as a buzzword for "modern web standards."

stomlinson• 16 years ago

Here's a slightly different featured CSS Gradient Generator that also generates a fallback background PNG for those browsers that need it, as well as being updated for IE9. http://www.shanetomlinson.com/static/css_gradient_generator/

Ultimate CSS Gradient Generator

Related Stories