Add animated gradients to your website with Javascript

A resource note on using a small Javascript library to create animated gradient effects on a website.

Motion without media weight

An animated gradient gives a page movement without loading a video or a sequence of images. The whole effect is colour values changing over time, which costs a fraction of what any media file would.

How the effect is built

A small library takes a list of colour stops and transitions between them on a timer, applying the result as a background. The setup is usually a container element, an array of colours, and a duration; everything else is defaults.

Because the result is a plain background, it composites cleanly behind existing content and needs no changes to the layout around it.

Restraint is the whole technique

Slow transitions between adjacent hues read as atmosphere. Fast transitions between distant hues read as a fault. The difference is entirely in the duration and the palette, so both deserve more attention than the code does.

Anything animating continuously behind text also needs a contrast check at every point in the cycle, not just at the start, and should respect a reduced-motion preference by stopping altogether.