Vertical Gradient

Last tutorial used vUv.x for a horizontal gradient. Swap it for vUv.y and the direction changes to bottom-to-top.

vUv.y controls the vertical direction

vUv.y is 0.0 at the bottom and 1.0 at the top:

• Bottom: t = 0.0 → fully colorA
• Top: t = 1.0 → fully colorB

The example colors

• a = vec3(0.1, 0.15, 0.25) — dark midnight blue
• b = vec3(0.2, 0.85, 1.0) — sky blue

Dark at the bottom, bright blue at the top — like a sky gradient.

Exercise

The exercise has factor t set to 0.0 (solid color a). Change t to vUv.y so the gradient runs bottom to top.

Answer Breakdown

vUv.y is 0 at the bottom and 1 at the top, letting mix interpolate into a vertical gradient.

vUv.x → horizontal, vUv.y → vertical. One letter apart.