How to Add an Animated Background to Your Website (No JS Library Needed)

Animated backgrounds have a bad reputation for tanking performance and distracting from content. Done right — slow movement, small canvas footprint, and a reduced-motion fallback — they can add polish without either problem.

Why canvas instead of a JS animation library

A general-purpose animation or particle library often ships far more code than a simple ambient background needs. A background like this can be done with a single <canvas> element and requestAnimationFrame, with no external dependency.

Keeping it lightweight

Move color blobs slowly using sine/cosine offsets rather than physics simulation — visually convincing and computationally cheap. Cap the canvas resolution to the element's rendered size rather than the full device pixel ratio. Always check prefers-reduced-motion and fall back to a static frame for visitors who've asked for less motion.

Getting the code

Open any background in the Animated category, tune colors and density in the editor, then use Copy CSS for a static fallback or export a PNG to use as the reduced-motion version of the same background.