Unity: Applying color gradient to an UI Image

I'm using a color gradient in Unity

            Gradient gradient = new Gradient();
            GradientColorKey[] gck = new GradientColorKey[5];
            float rgb = 255;

            gck[0].color = new Color(65 / rgb, 105 / rgb, 255 / rgb); 
            gck[0].time = 0f;
            gck[1].color = new Color(135 / rgb, 206 / rgb, 250 / rgb);
            gck[1].time = .25f;
            gck[2].color = new Color(60 / rgb, 179 / rgb, 113 / rgb); 
            gck[2].time = 0.50F;
            gck[3].color = new Color(255 / rgb, 230 / rgb, 0);  
            gck[3].time = 0.75F;
            gck[4].color = new Color(180 / rgb, 0, 0); 
            gck[4].time = 1f;

            GradientAlphaKey[] alphaKey = new GradientAlphaKey[2];
            alphaKey[0].alpha = 1.0f;
            alphaKey[0].time = 0.0f;
            alphaKey[1].alpha = 0.0f;
            alphaKey[1].time = 1.0f;
            gradient.SetKeys(gck, alphaKey);

The Gradient is an example, they are always size 5 but the color values can be changed by the user during runtime.

Now I want to us this gradient to color an UI Image so that the user can see the current gradient he created. Currently it looks like this using 5 images each colored with one of the 5 colors:

But it should be one image and look like this:

Is there a way to do this?

Thanks!