
Ultimate CSS Gradient Generator - thehodge
http://www.colorzilla.com/gradient-editor/
======
pxlpshr
wow this is awesome!!! bookmarking to my tools.

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

~~~
astrofinch
Mind sharing the rest of your tools? :-P

------
gmurphy
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
I totally agree. I would pay money easily for a site that does this +
lightness and hue adjustment relative to a current gradient.

------
Imagenuity
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
What do you plan to do with imagenuity.com? Just curious.

------
perezd
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.

~~~
morganpyne
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.

------
alanh
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?

------
Tichy
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
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
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

~~~
jamesbritt
"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."

Gradients are occasionally beautiful, when subtle, but the sooner the whole
"perky faux-physics" dies (especially the tiresome "everything has a glass
bubble" look) the better.

------
robgough
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.

------
lambda
"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
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/>

------
sushi
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.

------
wenbert
Nice. Thanks!

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

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

------
mrpollo
Thanks man, awesome tool :)

