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).
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.
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.
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).
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.
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.
"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.
"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."
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.
here's another one I use frequently. http://css3generator.com