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.

Photoshop Tutorials:

from FreeTimeFoto.

from Shape Shed.

A Gradient Tutorial from 9rules.

from SitePoint.

Smooth Gradient Header Photoshop Tutorial from Tutorial Blog.

from MediaCollege.com.

from Wipeout44.

from Wipeout44.

from Wipeout44.

from Wipeout44.

from Ajax Lessons.

Create a Shiny Badge Photoshop Tutorial from Tutorial Blog.

from Bartelme Design.

from Photoshopit.

from Depiction.net.

from Heathrowe.com.

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.

from CreativeTechs.

from Kevin Hulsey.

from Creative Bits.

from Vectips.

from BittBox.

- The Adobe Illustrator Video Podcast.

from Biorust.

from Wow Web Design.

GIMP Tutorials:

from TankedUp Imaging.

at YouTube.

General Tutorials:

from Web Designer Wall.

from A List Apart.

from CSS Tricks.

from Sam Rayner.

from Slayer Office.

from Photoshop Lab.

from Web Design from Scratch.

Gradient Tiles with Shadow from Projectseven.

from DMXzone.

Background Gradients and CSS from TankedUp Imaging.

from Just Talk About Web.

from Lukamaras.com.

The Push vs. Pull Gradient from Blogoscoped.

Gradient Generators:

from Dynamic Drive.

.

.

.

Online Gradient Image Maker.

- Create a rounded corner with a gradient.

- Includes a gradient generator.

.

.

Gradient Resources:

from CSS Globe.

from Dynamic Drive.

- Create Gradient Tabs.

.

.

from Deziner Folio.

from Deziner Folio.

from Deziner Folio.

from Deziner Folio.

from Deziner Folio.

from GoSquared.

from Euphorish.

from Slayer Office.

Lose the Images: How to Get Rounded Corners, Gradients, Drop Shadows and More Using CSS from DesignVitality.

from Listamatic.

from Gimp-Tutorials.net.

from Gimp.org.

Inspiration:

.

Color Inspiration: Blends, Gradients, Steps, Oh My! from COLOURlovers.

Originally Published June 16th, 2008