Gradient Shader Flow

How this effect works

This one runs on the GPU. A single fragment shader — a tiny program — is executed once for every pixel, in parallel, and its only job is to return a colour. There's no per-frame JavaScript loop drawing shapes; the browser hands the shader to the graphics card and it fills the whole screen at once. That's why a full-screen animated gradient costs almost nothing.

The colour comes from fbm noise — several octaves of smooth noise added together — mapped onto a three-colour gradient. The magic is domain warping: before we read the noise, we distort the coordinates using more noise, so the field folds into liquid, marble-like streaks instead of flat blobs. Turn the Warp layer off and you see the plain noise underneath — proof of how much that one step adds. Flow just feeds time into the warp; Grain sprinkles a per-pixel dither so the gradient never banks into flat bands. This is a TinkerFX first: a shader you can take apart — every slider is a uniform, and the Full-code tab is the real GLSL.