Help needed, Gradients on the nextion screen

Hi there,

I have been making a beautiful layout for my next Nextion project using a gradient as the background.
Like stated on the Nextion website, the screen uses a 16 bit color space. When I respect these export rules the Nextion editor and screen give me terrible banding on the gradient.

(When exporting from Nextion to an image file the banding is not present, so my guess is that it is not due to software compression?)

This banding problem is so bad that I don’t think it could be the limited color space of the screen either.
Also, I have seen other people use gradients as well with far better results.

I use a Nextion 7" NX8048P070_011 INTELLIGENT. (Should be official)

Does anyone know how I can get a smooth/decent gradient for my background?
(I have tried .jpg, .png, I could not figure out how the .xi file works)

Thank you in advance!

JPG and PNG are both compressed formats, the first lossy, the second lossless (in theory). But the Nextion has to expand these to a bitmap for displaying. Better feed directly a bitmap (bmp) in RGB565 encoding, so that the Nextion can display it 1:1 and doesn’t need to do decoding.

1 Like


Thank you @Fjodor for the help,

I did my designs in PS/AI and exported it as a 16bit PNG. Next I was able to convert this to a RGB565 BMP(Dithered) using the imagemagick command lines. As a result a nice gradient without banding (bmp style).

(Conclusion: Nextion decoder isn’t the best :grin:)

1 Like

This is exactly the same problem that I’m getting.
I have done gradient in AI and then moved it into PS. I have saved it as a 16bit png.

I have also downloaded imagemagick software and installed it. But now I’m lost.
Would you be able to share what you have done to convert it?

Thank you.

Is there any one who will explain the exact solution to this problem?

RBG565 doesn’t support enough colors and thus dithering is the solution.
Find a tool like imagemagick and convert the color range and apply dithering.


Halftone 4x4 (angled) 100% and 300%

Example using imagemagick:

convert input.bmp -ordered-dither h4x4a,32,64,32 color_565.bmp
convert input.bmp -ordered-dither o2x2,32,64,32 color_565.bmp

Halftone or Ordered produce good results