Radial Gradient Center
To fade outward from the center, start by measuring each pixel's distance from the middle:
Here's the breakdown.
How distance measures the spread
vec2(0.5) is the center of the canvas (UV coordinates 50%, 50%).
distance(vUv, vec2(0.5)) computes the straight-line distance from the current pixel to that center:
- Center pixel → distance = 0.0
- Canvas edge (horizontal or vertical) → distance ≈ 0.5
- Canvas corner → distance ≈ 0.7
The farther the pixel from the center, the larger the distance.
How mix turns distance into color
mix(innerColor, outerColor, dist * 1.5) uses the distance as the blend factor:
- Center (dist ≈ 0) → 100%
innerColor(blue-white) - Edge (dist ≈ 0.5, scaled to ≈ 0.75) → mostly
outerColor(black)
The * 1.5 scale factor makes the transition happen faster — a smaller multiplier spreads the glow wider and softer; a larger one shrinks it.
Try changing it
| Change | Effect |
|---|---|
Change 1.5 to 3.0 | Gradient compresses, smaller glow |
Change 1.5 to 0.8 | Gradient stretches, glow reaches the edges |
Change vec2(0.5) to vec2(0.2, 0.8) | Center moves to the upper-left |
Set outerColor to vec3(0.5, 0.0, 0.8) | Outer ring becomes purple |
Exercise
Write the complete shader from scratch to produce a blue-white glow at the center that fades to black toward the edges.
Answer Breakdown
distance(vUv, vec2(0.5)) gives each pixel a value that grows as it moves away from the center. innerColor is a bright blue-white. outerColor is black (vec3(0.0) is shorthand for vec3(0.0, 0.0, 0.0)). mix uses dist * 1.5 as the weight, blending toward black as the distance increases.
The starting code has no output. The essential steps are: compute a distance field from the center using distance, then feed it into mix to drive the color transition.
Try replacing distance(vUv, vec2(0.5)) with length(vUv - vec2(0.5)) — the two are equivalent.