Andrew Kelsall | Graphic Designer

I love gradients. I don’t like them when they’re used incorrectly, though. The very common “corporate fade” (or strongly-saturated colour fading into white background) on many business advertisements in recent years have given gradients a bad name. However, when used correctly, gradients can give a sense of added depth and 3D-appeal to both print and web works alike.

On that note, here is a list of articles, tutorials, tools, code and downloads to satisfy any gradient-induced craving you may have. Enjoy!

Articles:

Creative Curio → Taking Design from Good to Great with Gradients
Design Meltdown → Gradient Madness
Iit.Bloomu → Lesson in Gradients
Wipeout 44 → Gradient Mapping effect in Adobe Photoshop
Claudiamccue → Gradient Bug in Illustrator CS4
1stwebdesigner → 30 Logo Designs Using Gradient 3D Effects (3)
Shape Shed → Photoshop 101 – The Gradient Tool

Tools:

All Crunchy → The Amazing Gradient Generator
Patorjk → Gradient Image Generator
Gradcolor → Gradcolor Color Tool
Make Use Of → Online Gradient Image Maker
Gradient Maker→ Gradient Maker Tool

Tutorials:

Layers Magazine → Gradient Overlay
Graphic Tutorials → Adobe Illustrator CS4 Gradient Tools
PC and Web → How To Create A Cool Glossy Shiny Web 2.0 Heart in Photoshop
Vectips → Quick Tutorial: Adding Gradients to Text
A List Apart → Super-Easy Blendy Backgrounds
Vectorials → Quick Tutorial: Gradient Strokes
Digital Media Net → Transparent Gradients in Adobe Illustrator
Khulsey → Creating gradations with Adobe Illustrator’s Gradients & Blends
Vvector Diary → 13 Amazing Gradient Mesh Tutorials
Graphic Design Employment → Illustrator Gradient Mesh Tool – Creating Realistic Vector Art
Photoshop Digest → Gradient Navigation Bar
Veerle’s Blog → Elegant gradient ribbon in Illustrator

Coding/Web:

Planetozh → PHP and GD : Emulate Gradient Fill
Web Source → Create a Gradient Background Effect
Secret Geek → A Color Gradient Webservice
Design Detector → CSS Gradients Demo
Slayeroffice → Cross-browser gradient backgrounds without images
Herethere → Color gradient table generator
VRXnet → Color Gradient Generator
Ajaxian → CSS Gradients for All!

Downloads:

Free 4 Photoshop → Free Photoshop Gradients
Nanson’s Place → Nanson’s PSP 7 Gradients
Euphorish → Photoshop Tutorials: Free Web 2.0 Gradients (v1.0)
Lady Oak → Free Photoshop Gradients 2
Free Photoshop → Free Gradient Downloads
Tympanus → 5 free background gradients
Brushess → Gradient Shape Brushes
Brushes Download → Free photoshop gradients
Graphic Host → 1000 Free Gradients – Web 2.0 Gradients

If you don’t think this article deserves the title of been the Ultimate List of Gradient Resources, then let me know of any more great links below, and I’ll add them