For web designers and graphic designers, gradients provide almost unlimited options for creating the perfect look. This list is a collection of excellent tutorials and resources for effectively using gradients. Some of the tutorials and resources are specific to Photoshop and Illustrator, and others are general. Regardless of whether you use gradients every day or if you’ve never used a gradient, there should be something here for you.
Photoshop Tutorials:
Using Photoshop Gradient Tool from FreeTimeFoto.
Photoshop 101 - The Gradient Tool from Shape Shed.
A Gradient Tutorial from 9rules.
Creating Web 2.0 Effects with Photoshop - Part 1 from SitePoint.
Smooth Gradient Header Photoshop Tutorial from Tutorial Blog.
How to Create a Transparent Gradient in Photoshop from MediaCollege.com.
Creating Stylish Gradient Buttons from Wipeout44.
Jazzed Up Text With Gradient Effects from Wipeout44.
Become a Gradient Junkie from Wipeout44.
Gradient Mapping Effect in Photoshop from Wipeout44.
Web 2.0 Badge Photoshop Tutorial from Ajax Lessons.
Create a Shiny Badge Photoshop Tutorial from Tutorial Blog.
Tutorial: Rays of Light from Bartelme Design.
Sleek and Spicy Website Header Tutorial “Web 2.0 Style” from Photoshopit.
Gradient Text with Photoshop from Depiction.net.
Underwater Scene with Gradients from Heathrowe.com.
Warm Gradient Sunsets with Gradient Maps from Photoshop Essentials.
Using Gradients to Make Light and Shadow - and a Coffee Cup! from PSDTUTS.
Illustrator Tutorials:
Create Realistic Illustrations Using Illustrator’s Gradient Mesh from Veerle’s Blog.
Colorful Gradient Effects in Illustrator from Veerle’s Blog.
Transparent Gradients in Illustrator from CreativeTechs.
Adobe Illustrator - Gradient Mesh Tool, Gradients and Blends from Kevin Hulsey.
Transparent Gradient in Illustrator from Creative Bits.
Create Abstract Backgorunds in Illustrator from Vectips.
Illustrator 101: One Gradient Across Multiple Paths from BittBox.
Gradient Mesh - The Adobe Illustrator Video Podcast.
Gradient Meshes Introduction from Biorust.
How to Create Gradient Text in Illustrator from Wow Web Design.
GIMP Tutorials:
GIMP Gradient Tutorial from TankedUp Imaging.
GIMP Gradient Tutorial at YouTube.
General Tutorials:
Gradient Text Effect from Web Designer Wall.
Super-Easy Blendy Backgrounds from A List Apart.
Pure CSS Text Gradients from CSS Tricks.
Span-Free Gradient Text Effect from Sam Rayner.
Cross-Browser Gradient Backgrounds Without Images from Slayer Office.
Web 2.0 Design Kit from Photoshop Lab.
Gradients - The Web 2.0 How-to Design Guide from Web Design from Scratch.
Gradient Tiles with Shadow from Projectseven.
CSS Gradient Background from DMXzone.
Background Gradients and CSS from TankedUp Imaging.
CSS Web 2.0 Glossy Text from Just Talk About Web.
Creating Gradient Fills with ActionScript from Lukamaras.com.
The Push vs. Pull Gradient from Blogoscoped.
Gradient Generators:
Gradient Image Maker from Dynamic Drive.
The Amazing Gradient Generator.
RoundedCornr - Create a rounded corner with a gradient.
Form Style Generator - Includes a gradient generator.
Gradient Resources:
CSS Text Gradient from CSS Globe.
CSS Gradient Shadow from Dynamic Drive.
Tabs Generator - Create Gradient Tabs.
Ultimate Web 2.0 Gradients - Free Downloads from Deziner Folio.
Ultimate Web 2.0 Gradients - Volume 2 from Deziner Folio.
Ultimate Web 2.0 Gradients - Volume 3 from Deziner Folio.
130 Web 2.0 Gradient Swatches for Illustrator from Deziner Folio.
Ultimate Web 2.0 Layer Styles - Free Download from Deziner Folio.
Some Gradients to Save Some Time from GoSquared.
Free Photoshop Gradients Download from Euphorish.
Gradient Progress Bar from Slayer Office.
Lose the Images: How to Get Rounded Corners, Gradients, Drop Shadows and More Using CSS from DesignVitality.
The Gradient Green Navigation Bar from Listamatic.
130 Ultimate Web 2.0 Gradients for Gimp from Gimp-Tutorials.net.
GIMP Gradients from Gimp.org.
Inspiration:
Yukio Miyamoto - Master of Adobe Illustrator Gradient Mesh Tool.
Color Inspiration: Blends, Gradients, Steps, Oh My! from COLOURlovers.
42 comments from readers
1 Lamer Jun 16, 2008 at 9:44 pm
I’d totally bookmark this list if it had 72 resources.
2 Vandelay Design Jun 16, 2008 at 9:51 pm
Lamer,
I can find one more if it makes that much of a difference.
3 71 Amazing Gradient Resources for Web Design | WhiteSandsDigital.com Jun 16, 2008 at 11:03 pm
[…] gradients every day or if you’ve never used a gradient, there should be something here for you.read more | digg […]
4 Tyler Jun 16, 2008 at 11:29 pm
Very nice post, Thanks for the amazing resources.
5 Vandelay Design Jun 16, 2008 at 11:52 pm
Thanks Tyler. I appreciate the Stumble too.
6 Mothership Jun 17, 2008 at 12:24 am
Thanks for doing all the hard work for us.
I was playing around with gradients yesterday and this will help the learning curve. Appreciated.
7 Vandelay Design Jun 17, 2008 at 12:25 am
Mothership,
I’m glad it can help.
8 Mothership Jun 17, 2008 at 12:28 am
Definitely. At the stage I’m at, any help is appreciated. Our designers are helpful, but once they’ve finished chuckling at my efforts
Karl
9 71 lugares con buenos recursos sobre gradientes para diseño web » Cosas sencillas Jun 17, 2008 at 5:13 am
[…] en general, los gradientes nos proporcionar opciones casi ilimitadas a la hora de diseñar. En Vandelay Design nos conceden una excelente colección en una lista muy escueta, de tutoriales y otros recursos para […]
10 Hasan Yalcin Jun 17, 2008 at 5:31 am
[…] web tasarım için 71 gradient kaynağını […]
11 juliemadsen1 Jun 17, 2008 at 7:03 am
Great article. Thank you for sharing
12 HighFivez.com: Your Guide Through The Blogosphere. Find Blogs and Blog Posts. Jun 17, 2008 at 1:18 pm
[…] 71 Gradient Resources for Web Design […]
13 Tyler Jun 17, 2008 at 1:25 pm
Can I ad something else, this sites html is rendered in flash in realtime and the gradients are defined in CSS.
http://motionandcolor.com/wrapper
14 Martin Jun 17, 2008 at 3:57 pm
Thanks for including our GIMP tutorial. Having been a fan of your site for a while now, it’s gratifying to see you feel it’s worth including on the list.
I wish this list had been around when I first started messing about with gradients
15 website design Jun 17, 2008 at 5:09 pm
Gradient resources for every web designer
16 Vandelay Design Jun 17, 2008 at 5:36 pm
Martin,
You’re welcome. Thanks for reading!
17 links for 2008-06-17 « toonz Jun 17, 2008 at 7:32 pm
[…] 71 Gradient Resources for Web Design | Vandelay Website Design (tags: photoshop tutorials illustrator css gimp) […]
18 0 n 8 = ? » Blog Archive » 71 Gradyen (Gradient) kaynağı Jun 18, 2008 at 6:17 am
[…] tasarımların neredeyse olmazsa olmazı haline gelen gradyenler (türkçesi gradyen) (gradient) bu adreste enine boyuna […]
19 Çetin Toray Kişisel Blog Sayfası » Blog Arşivi » 71 Gradyen (Gradient) kaynağı Jun 18, 2008 at 8:15 am
[…] tasarımların neredeyse olmazsa olmazı haline gelen gradyenler (türkçesi gradyen) (gradient) bu adreste enine boyuna […]
20 deepdiver Jun 18, 2008 at 10:48 am
muchas gracias!
21 Guy R Cook Jun 18, 2008 at 3:44 pm
A great list, glad that the GIMP wasn’t left out. I expect this will be updated with more information over time?
22 Vandelay Design Jun 18, 2008 at 7:01 pm
Guy,
The post may or may not be updated. It depends on the amount of available time. If you have any suggestions feel free to leave another comment with a link.
23 Niksan Jun 19, 2008 at 2:57 am
Thanks for the great list!
24 Niksan Jun 19, 2008 at 3:27 am
Thanks for the resources!
25 Ethan’s Blog » Blog Archive » More Stuffs Jun 19, 2008 at 9:56 am
[…] Gradients […]
26 sir jorge of culver Jun 20, 2008 at 12:36 am
if there’s one thing that is taboo in a lot of design studios, it’s gradients.
27 Matthew Griffin Jun 20, 2008 at 8:06 am
Great list, Steven. I had no idea there were so many resources for gradients. Sir jorge, I imagine there are some other “taboos” that deserve more of your attention elsewhere.
28 Welcome to Paradise Jun 20, 2008 at 8:24 am
This is an awesome list. But I’ve one suggestion. I think it would have been much better if you’ve put how it looked, some sort of a screen shot. Just a suggestion though.
Cheers.
29 United Voices Jun 20, 2008 at 8:51 am
Ton of thanks to Vandelay for this great list! Keep it up.
30 links for 2008-06-20 | JeremiahTolbert.com Jun 20, 2008 at 12:34 pm
[…] 71 Gradient Resources for Web Design | Vandelay Website Design (tags: resources webdesign gradients) […]
31 Vandelay Design Jun 20, 2008 at 6:09 pm
Sir jorge,
Gradients can look pretty amateur if their not done well. There are some outstanding designers that do amazing things with gradients though. Check the tutorials at PSDTUTS for example.
Matt,
Thanks. I’m glad you liked the list.
Paradise,
Thanks for the suggestion. In the case of this post some of the resources didn’t lend themselves very well to images, but I think you’re right - it could have been improved with some well-chosen images. I’ll keep that in mind for the future.
32 71 Gradient Resources for Web Design Jun 21, 2008 at 7:35 am
[…] 71 Gradient Resources for Web Design For web designers and graphic designers, gradients provide almost unlimited options for creating the perfect look. This list is a collection of excellent tutorials and resources for effectively using gradients. Some of the tutorials and resources are specific to Photoshop and Illustrator, and others are general. Regardless of whether you use gradients every day or if you’ve never used a gradient, there should be something here for you. […]
33 » 71 Gradient Resources for Web Design Jun 22, 2008 at 6:47 pm
[…] can read the rest of this blog post by going to the original source, here […]
34 71 recursos de gradientes para diseñadores web | Isopixel Jun 23, 2008 at 12:01 pm
[…] Breves En Bandalay designs nos regalan esta excelente lista con 71 recursos de gradientes para diseñadores web. […]
35 Carl Everet Jun 24, 2008 at 4:35 pm
This list is OK, but would it have killed you to add 72 resources? 71 is a bit thin.
36 Find Me Discount Jun 25, 2008 at 12:45 pm
Wow that’s an extensive list. Will be useful for all sorts of graphic design. Gradients work very well as eye candy!
37 71 Gradient Resources for Web Design | kotahi.net - technology news Jul 1, 2008 at 12:21 am
[…] vandelaydesign.com - For web designers and graphic designers, gradients provide almost unlimited options for creating the perfect look. This list is a collection of excellent tutorials and resources for effectively using gradients. Some of the tutorials and resources are specific to Photoshop and Illustrator, and others are general. Regardless of whether you use gradients every day or if you’ve never used a gradient, there should be something here for you. […]
38 Websites you shouldn’t have missed in JUNE 2008 Jul 1, 2008 at 10:03 am
[…] 48- 71 Gradient Resources for Web Design […]
39 Best of June 2008 : : Life as a Web Designer Jul 1, 2008 at 3:56 pm
[…] 71 Gradient Resources for Web Design […]
40 Ve Design－唯壹设计 – 08年六月不该错过的网站们 Jul 2, 2008 at 1:23 am
[…] 链接：71个网页设计资源 71 Gradient Resources for Web Design […]
41 Best Design Resources of June 2008 | CrazyLeaf Design Blog Jul 2, 2008 at 12:04 pm
[…] 71 Gradient Resources for Web Design […]
42 En el tintero Vol.3 – Vacaciones | ZaRQuN.com Jul 20, 2008 at 4:49 pm
[…] 71 Gradient Resources for Web Design Sacale todo el partido a Photoshop, Ilustrador e incluso a Gimp con esta selección de 71 sitios especializados en gradientes. […]