How can I draw a rectangle with a color gradient?

Question

I'm trying to implement the below picture in my code but doesn't work. It only shows red color on all sides. I'm using line renderer and color gradient. Kindly check my code.

void Start()
{
lineGeneratorPrefab = new GameObject();

DrawLine();
}




private void DrawLine()
{
GameObject myLine = new GameObject();
myLine.transform.position = start;
myLine.AddComponent<LineRenderer>();
lr = myLine.GetComponent<LineRenderer>();
lr.material = new Material(Shader.Find("Sprites/Default"));     
lr.positionCount = 4;
lr.SetPosition(0, new Vector3(-2, 0, 0));
lr.SetPosition(1, new Vector3(2, 0, 0));
lr.SetPosition(2, new Vector3(2, -2, 0));
lr.SetPosition(3, new Vector3(-2, -2, 0));
lr.loop = true;


Gradient gradient = new Gradient();
gradient.SetKeys(
    new GradientColorKey[]
    {
        new GradientColorKey(Color.red, 0.25f),
        new GradientColorKey(Color.blue, 0.25f),
        new GradientColorKey(Color.green, 0.25f),
        new GradientColorKey(Color.yellow, 0.25f)
    },
        new GradientAlphaKey[] { new GradientAlphaKey(1.0f, 0.0f) }
    );
lr.colorGradient = gradient;

}

Answer 1

The problem is that you have set the time parameter of all four of you GradientColorKey to .25f so it will only apply the first color.

Just change it to something like this

gradient.SetKeys(
            new GradientColorKey[]
            {
                new GradientColorKey(Color.red, 0.25f),
                new GradientColorKey(Color.blue, 0.5f),
                new GradientColorKey(Color.green, 0.75f),
                new GradientColorKey(Color.yellow, 1f)
            },
                new GradientAlphaKey[] { new GradientAlphaKey(1.0f, 0.0f) }
            );

Here the red color is going to apply at the first 25%, then blue from 26% to 50%, and so on.

And you will get result similar to this