Post Pic

Avoid using Plain Colors and use Gradients Instead

During the period where there only was html that shaped a website you didn’t find any gradient at all. Not so long ago the gradients came to their right with new coding techniques like css to display images that before were heavy images and now just small bits repeating themself. Too bad many people still don’t get what a subtle(!) gradient can do.

Be Subtle

Right before we even start to talk about why gradients are often a better choice it should be clear we’re talking about subtle ones. It’s extremely easy to recognize a newbie’s work by looking at their gradients. They often use extreme color combinations like red and green, they can work together maybe, but a gradient will often make it look filthy and brown at the center.

Red to Green Gradient

Red & Green = Poop

Also keep in mind that black and white are the highest in contrast, try to avoid gradients that go from pitch-black to pure white.
Keep that in mind, the middle is a mixture of both colors, you’re actually working with 3 colors, not 2!

A Comparison

Black to White Gradient

Black to White Gradient

Look at this default gradient of Photoshop. It’s a small space with a color going to the extreme opposite. Do you ever see that in real life? Maybe on chrome objects or other weird materials, but just admit it, it doesn’t look very nice…

Soft Black to Soft Grey Gradient

Soft Black to Soft Grey Gradient

Now look at this gradient, I changed the black to a more very dark grey and the white is very light grey now.
This feels so much more like a material can touch, which is good.

Real Life Gradients

In real life we almost never see plain colors. Gradients are like the light on objects in real life.
We’re used to these kind of colors instead of a plain color and if we’re used to something it brings rest.
That’s why gradients don’t work so well with vibrant colors like
lime or cyan. And those plain colors aren’t meant to bring rest at all.

Please note there are always people who do like those (in my opinion) weird color combinations, but you often find these back on sites about the worst web layouts ever…

Examples of Good Gradient Usage

Quiktab Theme

Quiktab Theme (WordPress)

Note the only plain colors are the parts that need attention, the content areas.

Black Aperture Theme

Black Aperture Theme (WordPress)

Even the “logo” isn’t plain text. Again the important things that need to pop out have plain colors.

Examples of Good Plain Color Usage

TealGray Retro Theme

TealGray Retro Theme (WordPress)

Without the footer its gradient tabs the page would look more rigid, straight, maybe professional but also colder.

UniSphere Theme

UniSphere Theme (WordPress)

Because the colors are plain the design also gets calm in some way because everything is clear. Compare it with a sunny environment compared to a shady environment. Still the big blue area at the top needed a pattern to make it softer and more comfortable to your eyes.

What do You Think?

Did you already know this? Did I bring you a good reminder? Or maybe you think this post stinks because I’m totally wrong. Just leave a comment

Reblog this post [with Zemanta]

6 Responses


Very useful and informative blog post concerning using Gradients . I have bookmarked your blog for future posts and I will also refer your blog to my friends.


the mix making of red and green color looks very good..


I’m glad that I’ve found this blog.
You definitely can write and teach and inspire. Keep writing – I’ll keep reading.


Great post – even a subtle gradient can give a design that sleeker, more professional feel.


I love using subtle gradients in my designs. It’s crazy – even the blandest design can come to life and begin to look reasonable with a few delicate touches like subtle gradients instead of solid blocks of color.



This is awesome blog man, love the way you write Eli

Leave Your Response

* Name, Email, Comment are Required

About Us

I recently started my higher education as a Graphic Designer and I will be running the Interactive Design part of it. That includes photography, making movies, flash animations and web design and the design of web applications.

Learn More About Us

Write For Us

Want to write an article for us? Just go for it and get your name out. The good part compared to others is that your article DOESNOT have to be exclusive, meaning you can have it on your own website too!

Read More Details