Vertical Color Fade
Use vUv.y as the blend factor to smoothly transition a color from bottom to top:
Let's break it down.
What is vUv.y
vUv.y is the vertical position of the current pixel, ranging from 0.0 to 1.0:
- Bottom of the canvas →
vUv.y = 0.0(0%) - Top of the canvas →
vUv.y = 1.0(100%) - Halfway up →
vUv.y = 0.5(50%)
How mix creates the transition
mix(A, B, t) interpolates between color A and color B:
t = 0.0→ entirely At = 0.5→ half A, half Bt = 1.0→ entirely B
Using vUv.y as t means the bottom (t=0) shows bottomColor and the top (t=1) shows topColor, with a smooth transition in between.
In this tutorial, bottomColor is green (0.0, 1.0, 0.0) and topColor is yellow (1.0, 1.0, 0.0), so the canvas fades from green at the bottom to yellow at the top.
Try changing it
| Change | Effect |
|---|---|
Set bottomColor to vec3(0.0, 0.0, 1.0) | Bottom becomes blue |
Replace vUv.y with vUv.x | Gradient becomes horizontal |
Replace vUv.y with 1.0 - vUv.y | Gradient direction reverses |
Replace vUv.y with vUv.y * vUv.y | Gradient accelerates, top color appears more suddenly |
Exercise
Write the complete shader from scratch to produce a vertical gradient from green at the bottom to yellow at the top.
Answer Breakdown
bottomColor is pure green (red 0%, green 100%, blue 0%). topColor is yellow (red 100%, green 100%, blue 0%). mix uses vUv.y as the weight — at the bottom it takes fully from bottomColor, at the top fully from topColor, and linearly blends between the two in the middle.
The starting code outputs nothing. The key steps: define two color variables, then connect them with mix + vUv.y.
Try replacing vUv.y with smoothstep(0.3, 0.7, vUv.y) to concentrate the transition in the middle of the canvas while keeping solid colors at both ends.