Site map


GIMP gradient tutorial



This tutorial has been updated for use with GIMP 2.6.

I have split the tutorial into two different levels.

The one on this page is for people reasonably familiar with the GIMP interface and image manipulation commands.

The second is for people with very little experience of image manipulation programs and GIMP particularly. This includes screenshots with tooltips for each step of the operations involved. Follow the title links for the more indepth tutorials.

Create the gradient

In the main GIMP toolbox double click on the Fill with a colour gradient.

This opens the Gradient options box, here you are presented with various options for your gradient.

If you click on Gradient a dropdown list of set gradients will appear that you can use for your image. The default is FG to BG (RGB), which we will use here.

Double click on the Foreground colour in the main GIMP toolbox and pick or type in the hexadecimal code for the colour you want in the Change foreground colour option box.

Now double click on the Background colour in the main toolbox and choose the colour you wish to graduate to.


Save the gradient

If the gradient is one that you are likely to use frequently click on the Gradient dialogue button on the main toolbox. Right click on the highlighted gradient, FG to BG (RGB) in this case and select Duplicate Gradient.

This opens the Gradient Editor dialogue. Rename the gradient in here and save it. It will now appear on the dropdown list of gradients.

new gradient

Applying the gradient to your image

Open the image you wish to apply the gradient to. Click on the Select regions by colour on the main toolbox and select the colour on the image you want to apply the gradient to.

Reselect the Fill with a colour gradient and position the cursor where you wish to start the gradient. Click on the image, hold the mouse button down, move to where you want the gradient to end and release the mouse button.

apply gradient

The image should now have your gradient applied to it. Note that the foreground colour is your start of gradient and the background is your end point. The gradient will go in any direction that you want, experiment with it.

applied gradient

Using css to apply a background gradient

Ok, so now you know how to create and save your gradient. You can also now apply it to an image, but a very popular use for gradients is using them as a background for your web pages.

For an explaination of how to do this go to the css background gradient tutorial.

Freehand brushed gradients

If you want to use a freehand gradient, follow these instructions.

Click on the Paintbrush, Pencil or Airbrush tool on the GIMP toolbox, to make it active.

Then in the active window open the Tool Options dialogue

Windows » Dockable Dialogs » Tool Options

In the Tool Options dialogue click on the Use color from gradient option to make it active and change the various options to suit the size and type of gradient you wish to apply.

brushed gradient finished
Download GIMP Graphics by GIMP