Stepped Gradient Color Background

Hi all.

I'm curious about best practices or a "Unity approach" to recreating the stepped-gradient-color-background of the text UI, in this screenshot.

I'm newer to Unity, and I was wondering if there is a script based solution to this? Or a shader based solution? Or an image combined with a script based "re-tinting" type of solution?

Thank you for your time and insight.

 

I did run into a UI Gradient script which helps create the color gradient (https://github.com/azixMcAze/Unity-UIGradient)

But I'm still trying to figure out the "stepped" effect or "banding"(?).

 

The simplest solution is probably just a greyscale texture which then can be tinted in the default image component. Examples below. The colored one is simply tinting the first one with #5858B0.


As you said, it can also be done with both scripts and shaders. For script one could inherit from Graphic class and generate a quad per color band with vertex color interpolated for that band.