While doing a search about various web design topics (for this very column), I came across an interesting phenomenon, regarding gradients and their use in web graphic design.

There were tons of articles about proper and beautiful gradient usage online, of which the following five are but a chip off the iceberg. From just reading these articles, one would gather that using simple gradients in one’s site design is still on-trend.

InspirationTi.me: Gradients
WebDesignLedger.com: 55 Inspiring Examples of Gradients in Web Design
SixRevisions: 25 Great Examples of Using Gradient Effects in Web Designs
1stWebDesigner: Beautiful Gradient Effects on Web Design
TheDesignMag: 28 Excellent Examples of Using Gradient Effects in Web Design

But there’s an important caveat here: these articles are from a few years ago, and some of their sources have changed their styles, as I noticed when I began to click through the various lists of examples. Actually, a lot of their sources have changed their styles, to be honest.

This raises a question: are gradients passe? Are they no longer “in vogue” on the Internet, but instead going the way of the animated GIF and overly-enlarged RSS icon? Have we and our users become too accustomed to them?

The Verdict: Not Quite

As I toured the various example sites and saw how they had changed their designs since these articles were written, I came to a conclusion. Gradients are perhaps not as hot as they used to be in web design; the simple “one color blending into another color in a simple linear fashion” seems to have gone more or less extinct.

But the technique of using gradients is still visible in today’s web designs, just slightly updated. The current style now seems to favor a much more subtle and complex gradient, involving more than two colors blended together, or such a slight change from one color to another that it’s merely a 3-D look rather than an official “gradient.” Some examples, below:

PlayInTraffik	Features: More than two colors blended together (orange, gold, red, gray) Not just a one-directional gradient–it’s an overall effect Gradient includes soft shapes in the background Gradient effect extends onto logo of site (top left)
Features: Very, very soft and subtle gradient–hardly there at all Acts as background shading for the content, rather than a huge, obvious color shift Works with shades of the same color rather than two different colors	BluePixel
Newism	Features: Not just a plain, smooth gradient–has streaks in it More than two shades of color (range of purples) Background streaks mirror logo’s angles Radial gradient (bottom center) as well as linear (top left to bottom right)

Making Gradients New Again

Though the days of making simple and smooth gradients may be behind us, you can still use them for newer effects. Here are some tips for modernizing your own gradient look:

	Use more than two colors, or strange two-color combinations. You might find a surprisingly lovely emerald-green shade hidden between a deep gold and muted teal shade, like this example at left.
Try subtle background patterns along with a soft gradient to give even the background of your page a little more visual interest, like this miniature sample at right.
	Mess with the texture of your gradient; don’t be afraid to have sharper transitions of color, like the modern “streaked” design example at left.

What’s Your Angle on Gradients?

What do you think of using gradients in webdesign? Is it a past fad, a graphic design necessity, or a design style that hasn’t been thoroughly explored yet? Let me know in the comments!