So you've created a graphic that utilizes a gradient to put somewhere on your website. Could be the background image, or a header graphic, or maybe just a button. The thing is, your gradient isn't exactly smooth as it contains some noticeable banding, that is, the transition between colors is not smooth and contains hard edges.
The intensity of the banding problem can actually vary depending on the color choice, with some colors hardly showing any banding. If you're using a black to white gradient you'll probably notice banding due to Photoshop only having 255 shades of gray to get from black to white. The format you save your file as can also effect the severity of the banding in your gradient. Luckily, no matter how you create your gradient, or how you save it, there is a simple fix for this.
Notice the hard edged color transitions on the left compared to the smoother, more diffused transitions on the right.
The image we're using is 700 pixels by 400 pixels at 72 dpi.
One thing to double check if you're using the gradient tool is to make sure that the Dither option is turned on.
With your gradient created, select Filter > Noise > Add Noise. You only need a very small amount since you don't want to trade noticeable banding for noticeable noise. You want to add just enough so that the banding is lessened or goes away.
Here is another example of banding in a gradient, this time a blue radial gradient. While it's not as noticeable as the black and white gradient, there is still a slight banding issue.
This is the fixed version, and we only added .75 percent noise.