The Gradient Grief

Lately I have noticed the Gradient Trend, where it seems like the wondjerful use of gradients has thrown up all over a person's website. While gradients add depth to shapes and appear professional, they are not to be used for everything.

Of course, I bring to you a lovely example, because what is an article without a good example? For this particular article, I'll be referring to the gradient overuse of Cureless.net:


When I first saw this website, I noticed the purple gradient at the top, and then the orange gradient in the downloads box, and then... yet another gradient in the overall header, the top of the sidebar and the background of the content, and once I moved down to the footer, I wanted to explode.

No one should have this many gradients in one layout. Let me repeat: NO ONE SHOULD HAVE THIS MANY GRADIENTS IN ONE LAYOUT. This is Gradient Overload, and my first instinct was Kill It With Fire. Fortunately for her, this Gradient Kill is curable (ha, ha, ha -- sorry). All she needs to do is resist the urge to keep clicking on the gradient tool. It's really that simple.

Gradients are supposed to add a certain oomph to a layout, not completely consume it. I've seen many webdesigners (and I use that term loosely) feel the need to include gradients wherever they can to get the 'Web 2.0' feel, and they tend to go overboard more often than not. It's a common mistake, and all it takes is a little thought. Would a gradient add or take away from this image? Would it add depth? How many gradients do I have so far? Is it balanced?

An example of good use of gradients? Let's look at Anne. She uses gradients in her background and navbar, but the gradients don't consume the entire layout. The use of subtle gradients just add a little detail and depth to make it stand out. The concentration is at the top, and that's where it remains. It does not continue into the footer, because, to balance it all, there would have to be one really big footer.

Another thing that bothered me about Cureless is the use of the colors white to *insert darker color here*. In her "Download Free Wordpress Themes" button you can barely read the text near the top, because the white washes it out. The use of white at the top makes the gradient stand out that much more, and it ends up looking overbearing and heavy.

So there you have it kids. To sum it up:

  • Gradients are useful when adding detail and a certain oomph to a layout
  • Gradients shouldn't consume a layout
  • Learn to use subtle gradients
  • Use them in moderation