25 Great Examples of Using Gradient Effects in Web Designs

May 16 2009 by Jacob Gube | 47 Comments

Using color gradients, or effects that transition two or more colors with one another, is one of the most popular design techniques in web design. They’re easy to create yet hard to get right. In this showcase, you’ll witness some of the best examples of using color gradients in the hopes of inspiring you in your own designs.

If you’d like to learn more about color gradients, check out the tutorial called "Make High-Impact Backgrounds for Your Designs with Photoshop" which covers the use of color gradients, among other techniques.

ECTOMACHINE

ECTOMACHINE

Reinvigorate

Reinvigorate

Central Snowsports

Central Snowsports

Mediastroika

Mediastroika

Anderbose

Anderbose

Tim Van Damme

Tim Van Damme

Rise Creative Group

Rise Creative Group

Newism

Newism

Idea Foundry

Idea Foundry

atebits

atebits

Icebrrg

Icebrrg

FridgeWorks

FridgeWorks

Viget Extend

Viget Extend

Monterey County California Travel & Tourism

Monterey County California Travel & Tourism

avalonstar

avalonstar

Owltastic

Owltastic

Show & Tell Consignment

Show & Tell Consignment

love the septapus

love the septapus

youlove.us

youlove.us

SocialSnack

MULTIWAYS

MULTIWAYS

Ali Felski

Ali Felski

Treemo Labs

Treemo Labs

Sarah Longnecker

Sarah Longnecker

Inner Metro Green

Inner Metro Green

Share your thoughts

What do you think about color gradients in web design? Have you seen other exceptional uses of color gradients in web design? Share your thoughts and drop your links in the comments!

Related content

47 Comments

Jim Gaudet

May 16th, 2009

I am surprised you don’t have a TweetMeMe button or something on here to make it easier to send this out on Twitter..

Jacob Gube

May 16th, 2009

@Jim Gaudet: Yeah I know. I’m making my own “RT This” widget, and I haven’t gotten around to finalizing it. I may just use TweetMeMe til I do. Thanks for bringing it up.

Am

May 16th, 2009

I love the gradient example used in “youlove.us”. It’s the most straightforward and basic use of the gradient, but done so well.

Heather

May 16th, 2009

I think these are great examples of how something subtle (notice how none of these are crazy rainbow gradients or HUGE shifts in color) can really add an amazing detail to your design.

Brian

May 16th, 2009

I have found that very subtle gradients almost always look nice. It is drastic gradients (black to white) that are an eyesore and aren’t aesthetically appealing. Great collection though Jacob.

Jim Gaudet

May 16th, 2009

I was thinking of creating my own when the TweetMeMe wasn’t allowing me to put in my account. But, now it’s not that bad.

R U thinking of using a different url shortening service than bit.ly?

Liam McCabe

May 16th, 2009

Some good examples. :)

Keke

May 16th, 2009

great pixelbug @ Sarah Longneckers

SadistiX

May 16th, 2009

Real cool stuff man!

Jason Rysavy

May 16th, 2009

We created it, so maybe there’s bias…but here’s some more gradient: http://clarioanalytics.com/

Jeffrey

May 17th, 2009

Wow! I’m honored to have my site, FridgeWorks.com listed among these great examples.

I know it’s been featured a lot lately, including on this site, but I really love all the subtle gradients used throughout Campaign Monitor.

Zayan

May 17th, 2009

very nice designs …. I like them very much . Thanx for sharing

Crystal Posey

May 17th, 2009

*sigh* I love color.

Jordan Foutz

May 17th, 2009

Normally gradients are pretty gross and poorly executed, but these get the job done.

Michael Albert

May 17th, 2009

Thanks. Nice stuff, proves less is often more.

Television SPy

May 17th, 2009

Snazzy usage, I like the youloveus one.

Marvin

May 17th, 2009

These are nice gradients but be aware, when using it wrong it can look very cheap :)

Vinessa

May 17th, 2009

But what makes them great? Can anyone explain it to me? They look good, but what makes them that level above?

Tihomir Ivanov

May 17th, 2009

I also use gradient in almost every site I create :) I also like your list of examples.

Storm Sage

May 17th, 2009

I think the lesson I have taken from this page is…

KISS – keep it simple stupid.

Most of the examples above, I found were so subtle, enabling the screen to flow making them much more visualy appealing than some of my own trial and errors.

Stephan Barrett

May 17th, 2009

Thanks for the nod! Great design examples on this list.

Ryan Glover

May 17th, 2009

Love the examples. Could definitely take a few tips from these sites.

Sneh

May 17th, 2009

Awesome roundup! Some great designs in that list :-)

Gregory Domine

May 18th, 2009

Hi Jacob,

thanks for referring to our website.
We never had so much visits :)

And congratulations for your entire work on sixrevisions.com, that’s good stuff.

dEsIgn

May 18th, 2009

These are excellent examples of how gradients can really enhance a design. Thanks for sharing them!

Paolo Grusovin

May 18th, 2009

Thanx from Multiways :)

Guillermo

May 18th, 2009

Excelent designs…

You should see also http://bloghelpr.us/

Saw Htoo

May 19th, 2009

nice roundup. Got some tips from these website. Thanks!

Claire Web

May 19th, 2009

Sometimes i find it really hard to get started on a web design. I just need a little colour inspiration and away i go… Some fantastic designs with real nice contrasty colours and defined shadowing.

Chris

May 19th, 2009

Love the color and texture in Inner Metro Green. For me, that makes a site just pop out at the viewer.

gaus surahman

May 20th, 2009

Ali Felski gives me a sense of Miro a bit. SocialSnack is the most gradient I love. It doesn’t pretend to terrorize you with colors :) Thanks

Jacob Gube

May 20th, 2009

@Storm Sage: Great observation. I think Tyler Denis also mentioned that in the tutorial he wrote here a week back, about “High-Impact Backgrounds“. He says, and I quote: “[...] when you are designing a website with gradients, you should use subtle color variations.” I find that subtle gradients is the most effective. I like Sarah Longnecker’s gradient, it’s so subtle, you can barely see it, but it does give it a bit more depth if she used just a flat color.

@Claire Web: That’s not uncommon; sometimes you can sit in front of the computer for an hour and produce nothing. That’s when I know I need to step out of the house, walk around, get inspiration from people, places, and things that I see.

mindxstudio

May 21st, 2009

Good Collection, happy to learn a s web designer.

catherine

May 21st, 2009

nice collections and it is really useful

Sarah

May 22nd, 2009

These look fantastic! Does anyone have any good tutorials on how to use gradient effects like this?

Daniel Pipitone

May 22nd, 2009

Very nice, thank you for posting!

Keith D

May 23rd, 2009

Sarah
I was just thinking the same… any tuts on creating the effects.

PS not only creating them in Photoshop but also in Fireworks, the tool of we lesser mortals.

Great stuff as usual Jacob

Akhtar

June 14th, 2009

Those are really freaking cool sites,
really inspiration for anyone, Cheers!

TND webdesign

June 15th, 2009

Wow, awesome post!

Ashley Adams

September 23rd, 2009

Color gradients are becoming quite popular these days, aren’t they? You’ve an awesome showcase here. I particularly liked the work of Ectomachine, Rise Creative Group, and Ali Felski. Great post

sergi

November 10th, 2009

hi, six revisions, sorry to see that designmag has “appropriated” your stuff. that blows. keep up your excellent work. you’ll always come out ahead.

Kulin

December 31st, 2009

Wonderful article, keep it up !

shoaib hussain

February 22nd, 2010

this is really nice,m in a process redesigning(does not have) my personal blog.thnx a lot for the inspiration

nan

October 26th, 2010

inspiration!!

jrieckmann

November 22nd, 2010

Great list with some excellent design. Nice to see Rise here.

Orangewood

June 23rd, 2011

Really awesome post man!

Sus

August 24th, 2011

youlove.us

the ultimate way to use a gradient…!!

Leave a Comment

Subscribe to the comments on this article.