Ultimate CSS Gradient Generator | Hacker News Reader

Ultimate CSS Gradient Generator

colorzilla.com

198 pointsthehodge21 comments

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

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

Mind sharing the rest of your tools? :-P

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

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

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/

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

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.

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

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.

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?

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.

Also: grade.tumblr.com

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

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.

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

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/

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.

Nice. Thanks!

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

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

Thanks man, awesome tool :)

Reply on news.ycombinator.com