Changing the colour of a gradient using photoshop elements

Changing the colour of a gradient using photoshop elements (version 5 used):


Whilst designing a website I came across some lovely borders with gradients:

These were not just linear gradients but had been designed to go in corners i.e. the gradient goes round the corner (as in 2nd and last images above).

But I didn’t want red I wanted green. However, if you try and change the gradient colour by reapplying a new linear gradient you lose the corner affect. You can add new gradient layers with different linear angles to create the same effect but that meant you were recreating the whole thing from scratch – all I wanted to do was change the colour.

Here’s how you do it:

1. These were GIF files so I right clicked on the image and chose to open with Adobe Photoshop Elements.

2. Change the colour mode by selecting Image menu, Mode, RGB Color.

3. Choose Layer menu, New Adjustment Layer, Hue/Saturation.

4. Give the new layer a name.

5. Use the sliders to change the colour – you can change the saturation and brightness for different shades but in this case I wanted the same shade just a different colour so I adjusted the Hue to +109 which gave me the green required:

6. Save as a PSD photoshop file so that you can edit again in future.

7. Save as a web file – GIF again:


Author: James

IT Manager - Network, Web coding, MS SQL and Online Mapping expert

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: