Why the CSS version bands
A css animated gradient interpolates between two colours in eight bits per channel. Stretch that ramp across two thousand pixels and there are more pixels than there are steps, so the ramp arrives in stripes — most visible in dark blues and greys, which is exactly where a landing page wants to be. The animation is a keyframe walking the stops along, so the cycle is as long as the rule says and no longer.
Computed per pixel, not interpolated
These gradients are evaluated at every pixel from the formula rather than interpolated between two stops, so a wide element does not stretch a fixed number of steps across it. Where a ramp still lands on a visible boundary the shared post chain carries a grain control — per-pixel noise, kept below the threshold of vision, which breaks the stripes up. The motion comes from sampling a slow field rather than from a keyframe, so there is no cycle length to spot.
Mesh gradients, and the rest
An animated mesh gradient is several colour wells drifting on their own orbits and melting where they overlap — the archetype, and the quietest thing to put behind body text. Past that the catalogue has gradients laid across the frame at an angle, gradients riding a swell, and gradients bent through fabric. Every one takes three colours of your own.
