Fake gradient website background using Gimp

Neat little trick to create a fake gradient image with Gimp, from a random photo which you can than use as a website background.

First thing's first, let's create a new Gimp document.

Click File, choose New... (Ctrl + N for a keyboard shortcut).

Set both, image Width and Height to 300 px.


Also recommended:

  Fake gradient website background using Photoshop

Now you need to open a photo you want to turn into a gradient. Photos of nature such as horizon in my opinion work the best, but you can experiment with any kind of photo you like.

Click File and choose Open... (Ctrl + O for a keyboard shortcut).

Press Ctrl + A to select the photo then Ctrl + C to copy the selection.

Also recommended:

  How to Google for images you can use freely

Go back to your first document, click it and press Ctrl + V to paste your image.

As it most probably doesn't fit in the 300x300px document, we need to resize it.

Choose the Scale Tool.

Click the image you pasted to activate the scaling options.

Now resize and move the photo so it will fit into the document.

Tip: Hold Ctrl key while resizing if you want to keep photo proportional.

To move the photo click in the middle of it and drag it where you want it to be.

Press Enter when done.

Let's now create that false gradient effect.

In the menu click Filters, Blur and choose Gaussian Blur...

Set Horizontal and Vertical Blur Radius to about 80 px and click OK.

The goal is to blur the image in a way it will appear as a gradient.

This is how my fake gradient ended up looking like.

All we need to do now is to save it.

In the menu click File and choose Export...

In the Export dialog window, enter the name for your new false gradient background, choose JPEG image as a File Type (see picture) and click Export.

In the new dialog window, open the Advanced Options and enable Optimize and Progressive options.

If you save an image with a Progressive option enabled then when you put that image onto a website, it will load progressively. Depending on the Internet connection, it will first load a very low quality version, then a better one and at the end the original high-quality version of the image.

Set the Quality to about 80 and click Export.

That's it, a fake gradient image for website background is ready to be applied.

If you look at my background image info in Windows Explorer you can see it's only 3,41 KB small which is great to reduce the website loading times.

Learn how to apply your background image on to a website:

  A fake gradient website background with CSS