Gradients

How it works

A gradient turns a position into a color. Every one has the same two parts: a number t that runs from 0 to 1 across the surface, and a mix from one color to another by that t. Colors are vectors of three numbers, so mix blends red, green and blue at once.

The shape of the gradient lives entirely in t. The UV height gives a vertical band, like a sky; the distance from a point gives a radial glow; a dot product with a direction gives a band at any angle. Remapping and clamping t sets where the blend starts and ends, and passing it through a smoothstep or another curve changes how fast it goes through the middle.

The other choice is which color space the mix happens in. The same two endpoints mixed as sRGB values, as linear light, or in OKLab give three different middles: one dark and muddy, one bright, one that steps evenly to the eye. For a sky the difference is small; for a UI ramp, a heat map or a health bar it is what people notice.

The Linear sky card builds the basic gradient step by step. The RGB vs OKLab ramp card stacks the three color spaces one above the other, with a switch that shows only how bright each ramp looks.