8 CSS & JavaScript for Creating Animated Backgrounds

In web design, animation is often used as a way to draw attention. Movement compels users to focus on a specific element – such as a button or an image.

But animation can also be used in more subtle ways. Animated backgrounds, for example, often forego the bells and whistles seen within a site’s content. Rather, they’re utilized to create mood and enhance aesthetics.

That’s not to say an animated background can’t be loud or even obnoxious. It all depends on the purpose behind the element. If anything, this demonstrates the flexibility afforded to designers.

Today, we’ll explore animated backgrounds that run the gamut in terms of looks and use cases. They’re prime examples of how a bit of CSS and JavaScript can add flair to previously-static features.

Animated Bokeh Background by smpnjn

The bokeh style is often associated with photography. Here it’s used to great effect as dots come in and out of focus – similar to a lava lamp. This snippet utilizes vanilla JavaScript and HTML canvas to create a silky-smooth background.

See the Pen Animated Bokeh Lava Lamp Canvas by smpnj (@smpnjn)

Frosted UI Background by George Francis

This background has a similar effect, only a bit more subtle. It’s also a perfect match for the “frosted” UI in the foreground, as you can see the orbs gently floating underneath the glass-like container. The animation is also generative – meaning it moves randomly based on set criteria.

See the Pen Generative UI – Orb Animation [pixi.js] + Frosty Elements ❄️ by George Francis

Simple CSS Wave Background by Goodkatz

Here’s a narrowly-focused way of using an animated background. These gentle, CSS-powered waves provide a means to separate the hero area from the rest of the page content. It would make for a nice intro section that avoids overwhelming users.

See the Pen Simple CSS Waves | Mobile &Full width by Goodkatz

CSS Animated Gradient Background by Andrew

Gradients make for a great animated background. They’re noticeable without taking away from the more important elements of a page. Here we have a radial gradient that subtly shifts hues.

See the Pen CSS animated background by Andrew

CSS Seamless Animated Text by George Brook

Using CSS background-clip can add some serious impact to a design element. This snippet adds a seamless scrolling background to header text that instantly creates a festive mood.

See the Pen CSS Seamless Animated Text by George Brook

Pure CSS Animated Background by Mohammad Abdul Mohaiman

Speed can play a critical role in the user-friendliness of an animated background. These slowly-scrolling squares may twist and turn, but allow for easy reading of the title. If you’re going to add text on top of an animation, slower movement is better.

See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman

XI Concepts Background by Dhruve Shah

This fun hexagon pattern adds a high-tech look. Powered by jQuery, outlined shapes come and go – reminiscent of cells multiplying under a microscope. It could be a great fit for a hero area or even a site footer.

See the Pen XI Concepts Background by Dhruve Shah

SVG Animated Background by Josie Barker

Finally, this snippet smartly utilizes a combination of the effects we’ve seen above. There are shifting gradient hues along with gently morphing shapes as well. SVG and CSS ensure that everything runs smoothly. Importantly, it works just as beautifully on a small viewport as it does on a desktop.

See the Pen SVG animated background by Josie Barker

Make Your Backgrounds Stand Out

Animated backgrounds provide an easy way to bring some unique style to your website. Whether you utilize them for an entire page or just a single element, they can help to create a compelling visual and user experience.

However, it’s worth taking some time to carefully consider their impact before implementation. Ideally, animation should add to – not distract from – the goals of your website. Factors such as accessibility and usability are paramount. With that in mind, think about what’s best for your needs.