Published

Here’s a simple tip I learned to create clean, presentable gradients. The key word is subtlety.

A common trap that inexperienced designers fall into is trying to do too much with the gradient: too many colours, too many stop points, having the colour change too drastically over a short distance. The end result is something gaudy.

Ouch! This gradient isn't easy to look at!

3 Steps to make a gradient

Here is a quick and easy way to make a pleasant-looking gradient:

  1. Start with the base colour of the gradient.
  2. Choose a colour as an overlay. To keep things simple, choose either black, white or grey
  3. Gently adjust the alpha transparency of the overlay’s gradient end-points until you get the look you want.

That’s it! Let’s use Inkscape to demonstrate, though this will work in practically any graphics program.

So we start with a base colour for the gradient. In this case I’ve chosen green #00FF00.

Green will be the base colour for our gradient

Next, choose a colour as an overlay. To keep things simple, use either black, white or a shade of grey. In this case, I’m going to use black.

We are going to use a black overlay for the gradient

Now give the overlay a transparency gradient and adjust it in the direction you want. I’ve opted to have a vertical gradient. The image below uses Inkscape’s default alpha transparency values for the end-points of the gradient: 0 at the start and 255 at the end.

how-to-make-gradients_03_overlay-black-0-255

Now position your overlay on top of your base colour and take a look!

Our gradient! Version 0.1 alpha

The gradient is still too strong for my liking but you can see how using this technique makes it easy to produce pleasant-looking gradients.

More Fun with Gradients

From here there are a few things you can do to adjust the gradient further. I felt it was still too strong so let’s bring down the alpha transparency of the black at the end-point to about 160:

how-to-make-gradients_05_gradient_end-point-160

And no one said the start-point had to have 0 alpha transparency. Here it is with a value of 60:

how-to-make-gradients_06_gradient_start-point-60

Did you overhear your boss say he hates the colour green? Change the base colour!

how-to-make-gradients_07_gradient_base-colour-change

How about having your gradient start from half-way down? You have a few options here: resize the overlay, adjust the position of the end-point, or add an extra stop point where the gradient really starts. Take your pick but I find the 2nd and 3rd options are more flexible.

how-to-make-gradients_08_gradient_end-point-position-change

What’s that? I can has more overlays?! Yes, you can! Here is a base colour with both black transparency and white transparency overlays.

how-to-make-gradients_09_gradient_multiple-overlays

With a little practise, experimentation and imagination, you can make those Web 2.0 gradients that were once all the rage.

how-to-make-gradients_10_gradient_web-2-point-oh

Bonus Tip: Clone your Layers!

It may be a tad cumbersome to get at that base layer in order to change the colour especially if you have multiple overlays on top. Inkscape has a nifty Clone function which does exactly as it says: it clones an element. Select the element to clone and go to Edit > Clone > Create Clone (or press Alt + D on your keyboard).

In this image, I have cloned an element and placed a gradient over the clone:

how-to-make-gradients_12_clone-layers-02

The cloned element inherits the original’s properties, including colour. So change the colour of the original and you’ll change the colour of the clone.

how-to-make-gradients_12_clone-layers-03

One nifty property the clone does not inherit is the dimensions. So you could make multiple clones of an element, change their sizes as per required and adjust all their colours with one click. Useful if you’re mocking up templates!

how-to-make-gradients_12_clone-layers-04

Have fun experimenting!