25 Great Examples of Using Gradient Effects in Web Designs
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
Reinvigorate
Central Snowsports
Mediastroika
Anderbose
Tim Van Damme
Rise Creative Group
Newism
Idea Foundry
atebits
Icebrrg
FridgeWorks
Viget Extend
Monterey County California Travel & Tourism
avalonstar
Owltastic
Show & Tell Consignment
love the septapus
youlove.us
SocialSnack
MULTIWAYS
Ali Felski
Treemo Labs
Sarah Longnecker
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!
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