Your First Gradient: Using UV Coordinates to Paint Space

In the previous tutorial, we learned about UV coordinates and how every pixel knows where it is on the screen.

Instead of giving every pixel the same color, we can now use its position to create smooth transitions.

These smooth transitions are called gradients.

Gradients are one of the most important ideas in GLSL. They are used for lighting, backgrounds, masks, animations, procedural textures, and countless other effects.

The good news is that creating one only takes a single line of code.

Before You Continue

This tutorial builds on the previous lessons.

If you have not read them yet, start here first.

Part 1: Your First Shader: Painting the Entire Screen One Color

Part 2: Understanding UV Coordinates: The Secret Behind Every Shader

Now we are ready to let every pixel choose its own color.

A Simple Horizontal Gradient

Let's begin with this shader.

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vUv;

void main() {
    gl_FragColor = vec4(vUv.x, 0.0, 0.0, 1.0);
}

The only new part is this line.

vUv.x

Remember what we learned in the previous tutorial.

vUv.x starts at 0.0 on the left side of the screen and slowly increases until it reaches 1.0 on the right.

We are placing that value into the red channel.

That means the farther a pixel is toward the right, the more red it becomes.

The result is a smooth horizontal gradient.

Why Does This Work?

Imagine the screen divided into five sections.

Left                         Right

0.0   0.25   0.50   0.75   1.0

Now imagine those numbers becoming the red value.

Dark Red

↓

Medium Red

↓

Bright Red

Nothing is being animated.

Nothing is moving.

Each pixel simply receives a different number because it lives in a different location.

Creating a Vertical Gradient

Now replace vUv.x with vUv.y.

gl_FragColor = vec4(0.0, vUv.y, 0.0, 1.0);

Instead of changing from left to right, the gradient now changes from bottom to top.

Pixels near the bottom receive very little green.

Pixels near the top receive much more.

The only thing that changed was which coordinate we used.

Combining Both Coordinates

Now try this.

gl_FragColor = vec4(vUv.x, vUv.y, 0.0, 1.0);

Now two color channels are changing at the same time.

The red channel depends on the horizontal position.

The green channel depends on the vertical position.

Together they create a colorful two dimensional gradient across the screen.

This is often one of the first shaders people write because it lets you actually see the UV coordinates.

What About Blue?

Nothing stops us from using the blue channel too.

gl_FragColor = vec4(vUv.x, 0.0, vUv.y, 1.0);

Or even

gl_FragColor = vec4(0.0, vUv.x, vUv.y, 1.0);

Changing which coordinate controls each color channel creates completely different results.

This is a great way to experiment and become comfortable with UV space.

Why Are Gradients So Important?

Many beginners think gradients are just nice looking backgrounds.

In reality, they are much more than that.

A gradient is simply a value that changes smoothly.

That changing value can control almost anything.

It can control:

• Color
• Brightness
• Transparency
• Shape size
• Animation speed
• Distortion
• Lighting

Once you understand gradients, many advanced shader techniques begin to make much more sense.

Try These Experiments

Red Gradient

gl_FragColor = vec4(vUv.x, 0.0, 0.0, 1.0);

Green Gradient

gl_FragColor = vec4(0.0, vUv.y, 0.0, 1.0);

Yellow Gradient

gl_FragColor = vec4(vUv.x, vUv.x, 0.0, 1.0);

Cyan Gradient

gl_FragColor = vec4(0.0, vUv.x, vUv.x, 1.0);

Rainbow Style Gradient

gl_FragColor = vec4(vUv.x, vUv.y, 1.0 - vUv.x, 1.0);

Try changing the numbers and swapping the coordinates.

There is no better way to learn than by experimenting.

A Small Challenge

Can you create these gradients?

• Blue on the left and black on the right.
• White at the bottom and black at the top.
• Red in one corner and green in the opposite corner.
• Purple that becomes brighter as it moves upward.

Try solving them before looking up the answer.

What We Learned

In this lesson we discovered that gradients are simply values that change smoothly across the screen.

By using vUv.x and vUv.y, every pixel receives a slightly different value, allowing us to create smooth color transitions with almost no code.

This single idea appears in nearly every shader you will ever write.