In web design, animation is often used as a way of drawing attention. Movement forces users to focus on a specific feature – such as a button or an image.
But animation can also be used in more subtle ways. For example, the animated backgrounds of the bells and whistles seen within the content of the site are often overlooked. Instead, they are used to create mood and enhance aesthetics.
That is not to say that an animated background cannot be loud or even obscure. It all depends on the purpose behind the element. If anything, this shows the flexibility given to designers.
Today, we’ll explore animated backgrounds that run the gamut in terms of looks and use cases. They are excellent examples of how a little bit of CSS and JavaScript can override previously static features.
Bokeh Animated Background ag smpnjn
Bokeh style is often associated with photography. This is used very effectively as dots come in and out of focus – like a lava lamp. This snippet uses vanilla JavaScript and HTML canvas to create a silky-smooth background.
View Lava Bokeh Animated Lamp Canvas Lamp with smpnj (@smpnjn)
Frosted UI Background by George Francis
This background has a similar effect, but a little more subtle. It’s also a perfect match for the “Reached” UI in the foreground, as you can see the orbs floating gently under the glass – like container. The animation is also generational – which means it moves randomly based on set criteria.
Take a look at the Pen Generation Interface – Orb Animation [pixi.js] + Elements Frosty ❄️ by George Francis
CSS Simple Wave Background le Goodkatz
Here’s a narrow – oriented way to use an animated background. These CSS-powered sweet waves provide a way to separate the hero area from the rest of the page content. It would make a nice front section that avoids too many users.
Look at the CSS Simple CSS Waves | Mobile & Full Width with Goodkatz
CSS Animated Gradient Background by Andrew
Gradients create a wonderful animated background. They are careful not to remove the most important features of a page. Here we have a radial gradient that translates colors slightly.
Take a look at the CSS Pen animated background with Andrew
CSS Seamless Animated Text by George Brook
Using CSS background-clip can have some serious impact on a design element. This snippet adds a seamless scrolling background with header text that instantly creates a festive mood.
View Seamless Pen Text CSS by George Brook
Pure CSS Animated Background by Mohammad Abdul Mohaiman
Speed can play a crucial role in the user friendliness of an animated background. These slowly scrolling squares may twist and turn, but make the title easy to read. If you are going to add text on top of animation, it is best to move slower.
See Pure Css Pen Animated Background by Mohammad Abdul Mohaiman
Background to Concepts XI by Dhruve Shah
This fun hexagon pattern adds a tech look. Powered by jQuery, outline 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 Pen XI Concepts Background by Dhruve Shah
SVG Animated Background by Josie Barker
Finally, this paragraph cleverly uses a combination of the effects we’ve seen above. It also has transition gradient colors as well as smooth moving shapes. SVG and CSS ensure that everything runs smoothly. Importantly, it works as beautifully on a small scene as it does on a desktop.
Take a look at the SVG Pen animated background by Josie Barker
Make Your Backgrounds Stand Out
Animated backgrounds provide an easy way to give your website some unique style. Whether you use them for an entire page or for a single element, they can help create a very compelling visual and user experience.
However, it is worth taking some time to carefully evaluate their impact before applying them. Ideally, your website’s goals should be animated – not removed. Factors such as accessibility and usability are crucial. With that in mind, think about what works best for you.
Looking for more animated background examples? Take a look at our CodePen collection!
