Gradient that updates over time has obvious banding issues

I have created a basic 2D scroller game, and use a mesh which has gradient colours. I then update the colors across various gradients based on time (to represent time of day, and moving etc). The material is just a basic unlit shader with vertexcolors input.

While this works fine, the background has very visible banding issues (see example pic), and seem to scroll up or down the screen making it more obvious.

Any tips on what I can do to try and fix this?

add noise or dithering to the gradient during it’s creation, i would look into white noise (just google frac dot sin noise) or interleaved gradient noise, but you can also you use a texture like bayer dithering or blue noise if you don’t want to compute the noise

if you’re wondering why this works, just read the dithering wikipedia page or the page below, which also has some examples.

banding_in_games.pdf (loopit.dk)

here’s a bayer matrix and blue noise texture with rgb offset to dither each value differently.
if you use these, make sure not to use compression on them, and also i should tell you you want to read this in screen space, and have the texels line up with _ScreenParams.

9862329--1420914--dith_bayerDistributed.png
9862329--1420917--dith_blueNoiseDistributed.png