5 CSS Animated Backgrounds to Inspire Your Next Project

For when you like to move it, move it

Photo by Jude Beck on Unsplash

Since I began my coding journey, I’ve been consistently impressed with some of the super creative ways developers craft animated backgrounds and unique art using CSS. From meticulously detailed renditions of Renaissance paintings to psychedelic lava lamp-style morphing colors, the design possibilities are literally endless.

While researching ideas to expand upon my own CSS skills, I came across a number of coded examples that create fun, engaging backgrounds for any app to delight your users. In this article, I’ve gathered together a selection of some favorites, ranging for developers of all abilities, to help inspire your own future projects.

Diagonal Color Gradients

Here’s a pretty simple example using only pure CSS to start us off! This background rotates between 4 different color gradients, fading in and out along a diagonal axis in an infinite loop using keyframes. This is super easy to customize by changing the colors, speed or direction of the gradient.

Floating Color Orbs

This next example uses pure SCSS to create a colorful floating orb effect. The colors are randomly generated and the orbs slowly rotate, dancing around the screen. Upon closer inspection, I learned that each ‘orb’ is actually represented by text! Specifically, they are randomly generated shadows of a period as you can see listed as content in the code:

head::before, head::after,
body::before, body::after {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  content: '.';
  mix-blend-mode: screen;
  animation: 44s -27s move infinite ease-in-out alternate;
}