Cool Css Effects For Background

5 CSS Animated Backgrounds to Inspire Your Next Project

For when you like to move it, move it

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

H e re'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;
}

If you want to achieve a different effect with minimal changes, try this next one:

Floating Stained Glass Effect

This animated background is the exact same code as the Floating Color Orbs, with only TWO changes! The content was switched from '.' to 'V' and the text shadow within the for loop was changed from 7px to 2px. That's all, and we've achieved a completely new animation!

Image Scroll Effect with Color Overlay

Technically this example only animates when you scroll, but it's still a pretty cool effect! In the code, the fixed background image is attached to the html and an additional red color gradient with transparency and mixed-blend-mode is attributed to the body. The mix-blend-mode property determines how an element's content should blend with the content of the element's parent and the element's background (MDN). Since body is nested within the html, this creates an overlay of the red hue with the background image, reminiscent of a photo negative, that disappears as you scroll to the bottom of the page.

Multiple Background Image Parallax Animation

I love this one! The background images are layered upon each other and move at different speeds in alternate directions using pure CSS. This style of animation is called 'parallax' and it's a great way to create an illusion of depth from 2D images. I love how this effect really draws you in as a user and reminds me a bit of pop-up books from childhood.

Feel free to play around with these CodePens and make them your own! This is also just a small sample of ideas; the web is a treasure trove of infinite possibilities.

Happy coding! 😊