Creating a fading background gradient in Photoshop CS [html]

I personally use this technique quite a bit, it is quite a 'trendy' technique at the moment. Below is what the final result will be:

Gradient Background

1) Create a new document 900px by 900px. It will not stay this size, it just makes later steps easier.

2) Select colors for your gradient. I recommend similar colors, otherwise the gradient will appear too harsh.

3) Select the gradient tool (you may have to select the paint bucket, and hold it down before the gradient tool icon appears). Now hold shift and drag the gradient tool from the top of the image towards the bottom. The length of this line will affect the rate of change in colour . You should have something like this:

4) Go Image > Canvas size. We want to make this image small to make it fast loading, so to retain the gradient while keeping the image small, we cut it to just 1px wide.

Click ok, and save the image.

5) We've finished in Photoshop, now we just have to set the image as a background in a webpage html. I code mine like this:

<style type="text/css">
<!--
body {
background-image: url(INSERT URL);
}
-->
</style>

Put that in the head section of your website, and the background will appear, repeated across the page, but yet fast loading.

And you should have something resembling this.

Gradient Background