This is an easy way to change the color of your gradient, using png and body background color.

Step 1: Create a gradient png

- Open Photohop
- file > new
- 17 x 800 pixels
- make a gradient from white to transparent
- file > save as > PNG

Step 2: The css

IE is the big problem with PNG, so we have to use the filter hack.

body {
margin: 0;
padding:0;
background: #5788b2;
}

To change the color of your gradient, you only have to change the background color.

#gradient {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
width:100%;
height:800px;
}

This filter is for IE, the height is to show the gradient, you can delete it because the div will follow your content.

*>#gradient {
background:url(gradient.png) top left repeat-x;
}

This ID for the other browers, IE can’t read *>.

Step 3: HTML

<div id="gradient">
Gradient flow
</div>

The result

With only changing the background color, you have a nice gradient. You can change the gradient PNG for some other gradient effects. The only downside is that you have to put every div inside ID gradient on position relative and a higher z-index to make your links work.

I have tested it in:
- Firefox (mac en pc)
- IE 6
- IE 7
- Safari

View the result here