Fake gradient website background using Photoshop

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

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

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

Set both, image Width and Height to 300 px and click OK.

Also recommended:

  Fake gradient website background using Gimp

Now you need to fetch the 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 Place...

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

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


Press Enter when done.

Also recommended:

  How to Google for images you can use freely

This now the basis image for my fake gradient website background.

Let's make a gradient out of it.

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

Set Radius to about 70 px and click OK.

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

Behold, my fake gradient image we can use as a website background is finished, only thing left do now is to save it properly.

In the menu click File and choose Save for Web & Devices...

Save it as JPEG, enable the Progressive option and set the Quality to about 80 (see picture).

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.

Observe the image size as you are increasing or decreasing the image quality. You want to go for as low image size as possible, so when put on the web it loads as quickly as possible. But at the same time, you don't want to loose the image quality.

When done, click Save and save the image to your computer.

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

  A fake gradient website background with CSS