---
title: "Add animated gradients to your website with Javascript"
url: https://themodernweb.co.uk/2017/02/add-beautiful-animated-gradients-to-your-website/
description: "A resource note on using a small Javascript library to create animated gradient effects on a website."
published: 2017-02-01
updated: 2017-02-01
---

# Add animated gradients to your website with Javascript

Published 2017-02-01

## [February 2017](https://themodernweb.co.uk/2017/02/)

Filed under: [CSS](https://themodernweb.co.uk/category/web-development/css/), [Javascript](https://themodernweb.co.uk/category/web-development/javascript/), [Resources](https://themodernweb.co.uk/category/resources/), [Web Development](https://themodernweb.co.uk/category/web-development/)

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.

Next entry: [Developing a custom WordPress theme: 5 tips for success](https://themodernweb.co.uk/2017/02/developing-a-custom-wordpress-theme-5-tips-for-success/)

Previous entry: [A brief A-Z of web development acronyms](https://themodernweb.co.uk/2017/02/a-brief-a-z-of-web-development-acronyms/)

Back to [February 2017](https://themodernweb.co.uk/2017/02/) or the [front page](https://themodernweb.co.uk/).