I am struggling to create a gradient without banding. I have watched all the videos on YT and tried: Bluring all kinds, Noise, Dither,bit depth, Brush and doing the gradient in Illustrator.

Everything fails and I can always see the banding.

The background color I use behind the image: 050b3c enter image description here enter image description here


7 Answers 7


Noise and dither usually yield quite good results. There's a couple of things that may make “banding” more apparent:

  • “start” and “stop” colors
  • gradient size (banding becomes more apparent when “start” and “stop” points are getting farther from each other—gradient have to be “projected” on more samples with the constant number of available brightness values),
  • miscallibrated/poor quality monitor (have you tried to view your gradients on different monitors?),
  • reduced “per-channel” color resolution in system settings (seems unlikely nowadays since most systems use 32 bps settings, but still a possibility),
  • “wild” video card gamma settings (e.g. in “video card control panel” or gamme loader like Adobe Gamma Loader),
  • too “agressive” monitor profile (again view-on-other-monitors test should provide some hints about it),
  • reduced bit depth of an image.

Also it would be useful to know what your target device is. There's a difference how much you can “spread” your gradient whether you're targeting print (what kind of print also matters e.g.: screens like AM, pseudo-stochastic, stochastic) computer monitors or mobile devices displays. It also makes difference then wether you use raster graphics or vector graphics.

Bottom line is: this is quite complex subject :).

  • 2
    You are 100% right about this being a monitor dependent. After reading your answer I have decided to test the blue image(see updated OP) on my iPad3. The quality of the gradient on iPad3 is flawless. The thing is that I can't control the monitors of all the internet users. Jun 26, 2012 at 1:41
  • 1
    Ya on the white gradient I can see bands but on the blue gradient I don't see any bands
    – Ryan
    Jun 26, 2012 at 1:42
  • @Ryan It is not white, it is transparent. You should take it and add a layer (color:050b3c) underneath in PS. Then start playing with the underneath layer's opacity and see how the gradient banding changes. Jun 26, 2012 at 1:45
  • @RegisteredUser I don't care that much when the answer remains the same that its dependent upon the qualities stated above along with monitor settings.
    – Ryan
    Jun 26, 2012 at 1:49
  • 3
    Comprehensive answer. I think it might be worth pointing where the problem stems from, and why tricks like dithering are needed: 8 bit colour just doesn't give you enough steps to reliably give the illusion of a smoothly changing gradient.
    – e100
    Jul 2, 2012 at 14:28

Yes, it's possible to create high quality gradients. There's lots of factors to take into consideration though.

  • Photoshop doesn't and can't dither on the alpha channel. You're better using solid colours, if possible. Also, try to avoid layer opacity. Create the gradient using the exact colours you need. Edit: Photoshop CC 2014.2 added alpha channel dithering. :)

  • There can be some cumulative rounding errors if your image editor is using 8 bit per channel colour depth. The best quality way to generate a gradient that's created from several layers (with blending modes and opacity at play) is to render at a higher bit depth, then dither down to 8 bit per channel, if possible. Photoshop can do this. If you want an all solid gradient created from one layer, 8 bit per channel is ok (16 bit is only handy when there's layer blending involved).

  • Dithering is really, really important. (See previous point.)

  • Don't use Illustrator. It's 8 bit per channel and doesn't dither.

  • Image scaling will ruin the good work dithering has done, so you'll need to create the image at the correct size from the outset.

  • Most laptops have 6 bit per channel displays with some animated dithering tricks to make things appear better. Obviously you're fighting the display and smooth results may not be possible, due to the display. The new MacBook Pro with Retina display is a notable exception — it has a 24 bit IPS display. Edit: Laptop displays have improved a bit since this post!

  • As thebodzio has suggested, other OS-level processing can mangle things as well.

  • If you do use 16 bit mode in Photoshop, test it against 8 bit mode. There's certain circumstances where 8 bit mode looks better and other circumstances where 16 bit mode is better. Basic rule of thumb: If you have one gradient, use 8 bit with dithering. If you have several layers and gradients using opacity, use 16 bit mode.

Looking at your image, it seems like there's some other destructive conversion happening. Are you using Save For Web? Do you have Convert to sRGB turned on? If so, turn it off (it's the easiest way to ruin the quality of your images, and make destructive colour changes at the same time).

  • +1 for your awesome answer, but I have moved along since. First of all your option of generating a gradient without the alpha is not good, because the image I need should be transparent so that I can use it on a web page, laid over the entire page. Also after reading the accepted answer, I have decided to ditch PS and to create the gradient programmatically using CSS radial gradient (colorzilla.com/gradient-editor). Unfortunately the CSS did not help at all and the gradient continues to be strongly banded. Jun 26, 2012 at 10:36
  • You can actually build the alpha channel yourself in Photoshop, so you can have dithered alpha (manually). CSS is a good solution though. If you're using a laptop, be aware that you may see banding on your screen, but others may see a smooth gradient. The browser rendering will be a factor, too. Jun 26, 2012 at 11:42

Marc Edwards writes that "Photoshop doesn't and can't dither on the alpha channel." If so, you might be able to fake it by creating a dithered gradient from white to black and then making the white transparent. Alas, it's been a while since I used Photoshop, but the general idea would be something like this:

  1. Create a 16-bit gradient from black to white.
  2. Dither it down to 8-bit.
  3. Create a solid black layer and add a layer mask to it.
  4. Copy the dithered gradient into the layer mask (and invert it, if needed).
  5. Apply the layer mask to get a nicely dithered gradient from black to transparent.

(Yes, I know this is more of a comment than an answer, but it got too long to fit into the comment box.)

  • Yeah, you can definitely use a black and white gradient on a channel, then load that as a selection, then create a new layer, then fill the selection. You'll end up with a gradient with dithered alpha. Also, I'll edit my answer... 16bit mode is a bit strange. It isn't always better quality for gradients. Jun 26, 2012 at 11:48
  • Thx for the answer. It turns out that the gradient problem is not really because of the PS, because: 1) The image looks ok on iPad3. 2) CSS gradient looks banded as well on monitor. Jun 26, 2012 at 12:39
  • CSS gradients aren't dithered on most browsers. Sad but true.
    – aaaidan
    Feb 13, 2013 at 0:53

I've found a similar problem in Illustrator (which doesn't even have a "dither" option for gradients). It sounds a bit crazy, but I get around it by applying a "glass" filter, which can approximate dithering with the right params.

I use:

  • Distortion: 2 (this is dependent on the size of your bands).
  • Smoothness: 1
  • Texture: Frosted (the noisiest built-in texture)
  • Scaling: 50%

In Illustrator, this introduces white specks at the edges of your object, which you can fix by using a clipping mask.

Results? "Dithered" one on the right. It does add a bit of a noisy texture, but I think it's better than the bands most of the time.

Banded gradient Dithered


A very basic difference on creating gradients is using the Gradient Layer which has a dither option built in (Layer>New Fill Layer>Gradient) and stays adjustable. From here on you could convert to smart layer and add whatever effects you need to improve further, but it gives you a much better starting point.

  • The dither option for gradient layers only dithers the red, green and blue channels, not alpha (unfortunately). Jun 26, 2012 at 11:52
  • 2
    I did not know that. Transparency can also be achieved via layer mask though. So, how about making a black to white gradient and using it as a layer mask?
    – KMSTR
    Jun 26, 2012 at 11:54

enter image description here

These are three samples demonstrating dither. The set below is the above set with levels adjusted to highlight the effects of dithering.

enter image description here

From left to right, first one is most visibly banded; no dither present. The second one is the same gradient with dither; much better. And the third one, the one on the right, has dither, and I have additionally added a layer of noise, in effect boosting the dither. See commentary for why you would add the additional noise. See "additional notes" for how to dither transparency/alpha channel.


I have been making large renderings of gradients with minimal color variation, and banding was very visible without dithering, like in the first sample. Then I found out about dither and it improved things a lot, that's the second sample. But on a large rendering (less visible here) there was still some banding. I needed more aggressive dither. So I copied* the gradient layer, rasterized it and added a tiny amount (0.1%) of uniform monochrome noise. That improved the large scale image considerably. That's the third sample. The improvement from additional noise (which is what dither is essentially) is less visible on a small scale like in this sample here, but it was very important on a large rendering like the ones I was working on.

*I created a separate layer for noise because that way I could control noise with the new layer's opacity.

Additional notes

  • I've only discussed the actual image. The hardware and driver side of things can be influential as well; another device might display things differently. Other answers have covered that pretty well.

  • Photoshop does not dither the alpha channel. If you need dithering on transparency you have to dither the alpha channel manually. I would use a mask layer to create transparency, so it would only be a matter of dithering that mask layer. And when working with layer masks don't forget to ALT+left click on the layer mask to display it.


Very useful article on the topic: http://nomorebanding.com/cache

Here is the essence:

The idea is to create gradient in 16-bit mode, and then convert it in 8-bit mode, following procedure for manual dithering (using custom dithering layer). Here is the procedure:

1.Turn off default dithering (Edit > Color Settings un-check Use Dithering), because we're going to make our own dithering "engine"

2.Create a new layer (should be topmost).

3.Fill it with solid 50% gray.

4.Filter > Noise > Add Noise. (Amount 25%, Distribution-Uniform, Monochromatic-checked)

  1. Hit Ctrl+F to repeat the noise filter on the same layer.

6.Set the layer to Linear Light.

7.In the Layers palette, set Opacity to 1%, Fill opacity to 19%.

Important: You need to flatten the image (including the noise layer) while in 16 bit mode and only then convert to 8 bit mode for export. If you do it the other way around, you'll lose all 16 bit information first, and then the noise layer will do precisely nothing in 8 bits. Also, mind Photoshop's Use Dither setting. You can use either the layer or the native dithering method, but don't use both during conversion, it results in twice the noise you need.

Not the answer you're looking for? Browse other questions tagged or ask your own question.