Adding gradient to body background

Surf around and you'll notice that a lot of websites feature a darker background towards the top of the page that gradually dissolves into the main body color. This can be accomplished using almost any photo editing software (GIMP, Photoshop, etc.) and some very simple CSS.

The first thing you want to do is find a suitable background color for your website that the gradient will fade into. Tools you can use to save some time include the Web Developer Toolbar and ColorZilla; both are free add-ons for Firefox that make any designer's life a lot easier.

After that step is complete, open up your photo editing software and create a new image with a canvas size that is 2 pixels wide and about 400 pixels tall. The height can change based on the appearance you're going for, but it is unnecessary to make your image any wider than 2 pixels. This will help keep the file size small and make your website load faster.

With your editing software open, create at least two layers. Label the bottom one "background" and the top one "gradient." Fill in the background layer with the color you chose earlier for your gradient to fade into. Next, with the gradient layer open, select the gradient tool and set it to "Foreground to Transparent." You'll need to play around with colors and gradient lengths in order to achieve the desired effect, so do so until you find something your happy with.

Once you think you found the right gradient, you're ready to save it and try it out in your website. First, however, hide the background layer of your image. This is usually done by clicking on the eye symbol in the layers window. Doing this ensures your image will flow smoothly into the rest of your background.

Next,if you're using PhotoShop, click on "File," "Save for Web and Devices." On other programs, just select the function that allows you to save as a PNG. Under the dropdown list of file types, choose PNG-24. PNGs support transparency, create smooth gradients, and are generally small in file size. Using PNG-8 may achieve the desired effect with a smaller file size, but transparency sometimes becomes an issue. After selecting PNG-24, choose the highest quality compression and save the file in your images folder as "topgradient.png".

Next, simply insert this code into your .css file and save it:

body {
margin: 0 auto;
text-align: center;
background: #34567B url('images/topgradient.png') repeat-x 0 top;
}

You'll need to change the hexadecimal color to match the color you chose, but everything else should work fine.