A Gradient Tutorial

(Posting this here instead of because our server is currently being moved!)

If you add together all the “interface tricks” designers use on 1) websites, 2) blogs, and 3) web applications, the one common thread is the idea of manipulation. When we use gloss, gradients, or drop shadows it’s because we’re trying to manipulate your eye into thinking the 2D screen in front of you is a lush 3D landscape filled with volume, depth, and light sources. When you visit a site that looks really sleek and cool, it’s probably because they manipulated your eye correctly and the 3D effect looks “real”, and on sites that look odd or “not as real” it’s because the effects they used didn’t mimic what your eye believes as 3D. Your eyes have been looking at things in the world for a very long time and they’re used to what a shadow looks like, what a light source’s highlight on an object looks like, etc. If you don’t approximate what your eye “thinks” something should look like then your design won’t accomplish the 3D look you’re trying to emulate.

Here are three blocks with various gradients applied, check them out and I’ll go over the differences:


Box 1 illustrates a classic problem I see a lot, and that’s the loss of saturation in the image. Saturation is how intense a specific color is, and a less saturated hue is muddy or grey. When light strikes an object it doesn’t make it less saturated, but simply lighter and possibly more saturated (more saturated because the added light counteracts the shadow mixed with the color) so keep that in mind. Note that the box doesn’t look very “rounded” or 3D at all, it just looks flat and uninteresting.

Box 2 shows another type of gradient some designers use, and although it looks better than Box 1 (doesn’t lose saturation) it’s off because it’s not subtle enough. Box 2 looks like a copper panel that has been hit with a flashlight at full blast — not the effect we’re looking for. Tricking eyes into seeing 3D when there’s only two dimensions means reproducing what they see normally, which would be common objects with inside lighting, or outdoor objects with subtle natural lighting. A flashlight or strobe light is not a common light source, so don’t use that metaphor when working with gradients.

Box 3 is the best out of all. The light source is subtle, the color of the highlight has more saturation than the other two, and the color change is gradual enough to trick your eye into thinking it’s a beveled, 3D panel. If you’re going for a beveled-out look, this is the type of gradient you should be trying to reproduce.

Creating A Gradient In Photoshop
There is a dedicated gradient tool in Photoshop, but just like with anything “obvious” it turns out to be anything but. There are multiple ways of producing a gradient in Photoshop, and I’m going to show you the way I always use because it’s pretty non-technical and produces reliable and reproducible results.

Step 1: Fill Your Base Layer
I like to use a Foreground->Transparent gradient, and to work with that you need a color to show through the bottom transparent area. To start, make a New Layer (Shift+Cmd+N, Mac) and fill it with a color a bit on the dark side. Here’s a screenshot of the color I picked, note how I’m trying to stay closer to the right side of the Hue color square so that my base isn’t muddy (moving farther to the left decreases the Saturation, making it muddy):

Dark Red

Step 2: Make Your Gradient Layer
Make a New Layer again, name it something different from your base layer, make sure it’s on top of the previous layer.

Step 3: Pick Your Lighter Color
Your foreground color should still be the dark red you selected in Step 1. Click on the foreground square to bring up your color palette, and then select a secondary color that is lighter and slightly less saturated. Keep your second color close to your first, just so your gradient is subtle and not as jarring:

Dark Red

Step 4: Make Your Gradient
You now have a solid color base layer, and a highlight color you’re about to use as your gradient. There are many ways to use the Gradient tool, however I highly suggest only using the Foreground->Transparent mode because you can control it the best, and we’ll be using that mode here. Select your Gradient tool (part of the Paint Bucket Fill tool if that’s already selected) and make sure the top toolbar looks like this:

Gradient Toolbar

These settings mean: 1) Foreground->Transparent gradient type, 2) Linear gradient orientation, 3) Normal mode, 4) Full opacity to start, 5) Transparency is turned On. The two most important are the first and the last: make sure that Foreground->Transparent is selected, and that your gradient is free to turn transparent at the end.

The gradient tool works by dragging a line across the area you want to apply the gradient. In a normal, linear, FG->TRANS gradient, your foreground color will start at your first point and will become transparent by the end point. The longer your line the smoother your gradient will be, but if it’s too long then it’s difficult to see the gradient at all. I normally make my gradient line about 10° past vertical, leaning towards the upper left, because you’re trying to emulate a top-left light source in all user interface design. Varying the length of your gradient, the degree tilt, and the placement of the start will allow you to tweak various parts in order to get it perfect. Here’s a screenshot of my gradient, with the start and end points indicated:

Start and End

And that’s it! Here are some review points:

  • Make it subtle, not drastic.
  • Keep your color intact, don’t lose saturation.
  • Use multiple layers for maximum flexibility, combine after you’re fully satisfied.

Happy gradienting!