How to stop gradient banding?

I’m not sure if the problem is in Unity or Illustrator, and its only a problem on a couple of images. My artist saved these two vector images in Illustrator, with the save for web, to a PNG-16. When I view the PNG file on my computer the gradients look good, but as soon as I import them into the editor, the gradients band really bad. When I build it to the Android phone, banding still exist. I have all the setting adjust on textures for best quality. Nothing has worked. Anyone have any suggestions?

Click on your image in your project folder.

Now in the inspector uncheck “Generate Mipmaps”, and hit the apply button.

Now they should look as they appear in your computer.

If still they dont appear as you want them, then change the Format to “Truecolor” and again hit the apply button.

Although changing it to truecolor increases the image size almost four times the size of the compressed type.

:slight_smile:

In addition to disabling “Generate Mipmaps” you should check the resizing settings:

  • Set the format to “automatic” and the compression to “none”, your image will be used without modifications
  • Set the format to “RGB24” (without alpha) or “RGB32” (with alpha channel) so you do not loose color information by a wrong quantization bit size of the source image color space
  • At last you should check your source image resolution, as the gradient banding could appear when your source image resolution is low and Unity upscales the image for UI