Basic Gradient Effects
The sample code uses uv.y to drive the blue channel, creating a gradient from bottom to top. It all comes down to this line:
Let’s break down how it works.
What are UV coordinates
uv is the normalized position on the canvas. Each component ranges from 0.0 to 1.0:
uv.x: left (0%) to right (100%)uv.y: bottom (0%) to top (100%)
Every pixel has its own uv value. The bottom-left corner is (0.0, 0.0), the top-right is (1.0, 1.0).
Color that changes with position
Plug uv.y into a color channel and that channel’s value shifts depending on where the pixel sits:
Red and green stay fixed at 1.0. Blue goes from 0 at the bottom to 1 at the top, so the canvas fades from yellow to white.
Try changing it
| Change | Effect |
|---|---|
Replace uv.y with uv.x | Gradient runs left to right instead |
Replace the red 1. with uv.x | Red fades horizontally, blue fades vertically — two gradients at once |
Replace the green 1. with 0. | Bottom becomes black, top becomes blue |
Replace uv.y with 1.0 - uv.y | Gradient flips — yellow on top, white on bottom |
Exercise
The exercise canvas starts as a flat yellow. Change the blue channel so it varies with uv.y, producing a gradient from yellow at the bottom to white at the top.
Answer Breakdown
The starting code is vec4(1.0, 1.0, 0.0, 1.0) — blue is fixed at 0.0 (0%), so the whole canvas is yellow.
Changing the third argument from 0.0 to uv.y makes the blue channel reflect each pixel’s vertical position: uv.y = 0.0 at the bottom means no blue, uv.y = 1.0 at the top means full blue. Since red and green stay at 100%, the bottom reads as yellow (red + green) and the top reads as white (red + green + blue all maxed out).
Try replacing the red channel with uv.x as well — you’ll get two gradients blending at once.