Before continuing with this lesson, if you are joining this series for the first time, I highly recommend reading the complete overview of everything we have covered so far.

A Beginner's Journey Through GLSL So Far
https://ecency.com/@hey2d/a-beginners-journey-through-glsl-so-far-d2z

That article covers the foundations we have been building throughout this series, including:

• Drawing a solid color on the screen
• Understanding UV coordinates
• Horizontal and vertical gradients
• The mix() function
• The clamp() function
• Several small exercises that help build intuition instead of memorizing code

Once you are comfortable with those ideas, this lesson will feel like a natural next step.

---

From Solid Colors to Smooth Gradients

In previous lessons, we learned how to fill the entire screen with a single color. Every pixel received exactly the same value, so the whole image looked flat.

Now we are going to create something much more interesting.

Instead of showing one color everywhere, we will smoothly blend between two different colors.

To do that, we will use a function we have already seen before.

mix()

The only thing we need is a value that changes across the screen.

That value is vUv.x.

---

Understanding the Blend Factor

The mix() function takes three values.

mix(a, b, t)

• a is the first color.
• b is the second color.
• t decides how much of each color appears.

When t is 0, you only see the first color.

When t is 1, you only see the second color.

Any value between 0 and 1 creates a smooth blend.

Instead of typing a fixed number, we use

float t = vUv.x;

Since vUv.x changes from 0 on the left side of the screen to 1 on the right side, every pixel receives a slightly different blend value.

That is what creates the gradient.

---

Blending the Colors

Once we have our blend factor, the code becomes very simple.

float t = vUv.x;

vec3 color = mix(colorA, colorB, t);

The left side of the screen has t = 0, so it displays colorA.

The right side has t = 1, so it displays colorB.

Every pixel in between smoothly transitions from one color to the other.

This is one of the most common techniques used in shaders.

---

The Example Colors

The exercise uses these two colors.

vec3 colorA = vec3(0.15, 0.2, 0.95);
vec3 colorB = vec3(1.0, 0.6, 0.15);

The first color is a deep blue.

The second color is a warm orange.

As vUv.x increases, the image gradually changes from blue on the left to orange on the right.

Even though only one number is changing, the result looks smooth because every pixel receives its own blend value.

---

The Exercise

The exercise begins with

float t = 0.0;

Since t never changes, mix() always chooses the first color.

The entire screen stays blue.

Your job is simply to replace it with

float t = vUv.x;

That one change is enough to turn a solid color into a smooth left to right gradient.

---

Why Does This Work?

Remember what we learned about UV coordinates.

vUv.x starts at 0 on the left edge of the screen.

It slowly increases as we move across the image.

By the time it reaches the right edge, its value is 1.

Since mix() expects a value between 0 and 1, vUv.x is the perfect blend factor.

You do not have to calculate anything yourself.

The UV coordinates already provide everything you need.

---

Try Different Color Combinations

One of the best parts of this exercise is how easy it is to experiment.

Try replacing the colors with your own.

Purple to Cyan

vec3 colorA = vec3(0.5, 0.0, 1.0);
vec3 colorB = vec3(0.0, 0.9, 0.9);

Black to White

vec3 colorA = vec3(0.0);
vec3 colorB = vec3(1.0);

Red to Yellow

vec3 colorA = vec3(1.0, 0.0, 0.0);
vec3 colorB = vec3(1.0, 1.0, 0.0);

Changing only the colors gives the shader a completely different appearance while the logic stays exactly the same.

---

Reverse the Gradient

What if you want the colors to move in the opposite direction?

Instead of

float t = vUv.x;

try

float t = 1.0 - vUv.x;

Now the left side becomes the second color, while the right side becomes the first.

Nothing else has to change.

---

Complete Example

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vUv;

void main()
{
    vec3 colorA = vec3(0.15, 0.2, 0.95);
    vec3 colorB = vec3(1.0, 0.6, 0.15);

    float t = vUv.x;

    vec3 color = mix(colorA, colorB, t);

    gl_FragColor = vec4(color, 1.0);
}

Posted Using INLEO