Horizontal Gradient
7 / 30
Create a simple left-to-right gradient using vUv.x and mix().
Use vUv.x as the factor for mix to create a left-to-right two-color gradient.
The blend factor
The t parameter in mix(a, b, t) controls which color dominates. Use vUv.x as t: left side gets color a, right side gets color b:
The example colors
The code uses:
a = vec3(0.15, 0.2, 0.95)— deep blueb = vec3(1.0, 0.6, 0.15)— orange
Left side is deep blue, right side is orange, smooth transition in between.
Try changing it
Swap a and b for different combinations:
| Combo | a | b |
|---|---|---|
| Purple → Cyan | vec3(0.5, 0.0, 1.0) | vec3(0.0, 0.9, 0.9) |
| Black → White | vec3(0.0) | vec3(1.0) |
| Red → Yellow | vec3(1.0, 0.0, 0.0) | vec3(1.0, 1.0, 0.0) |
Exercise
The exercise has factor t set to 0.0 (solid color a). Change t to vUv.x so the gradient runs left to right.
Answer Breakdown
Just change that one line. vUv.x is 0 on the left and 1 on the right, letting mix smoothly interpolate between the two colors.
Try t = 1.0 - vUv.x — the gradient reverses direction.