Cascading Style Sheets (CSS) can help you do more than just determine colors, fonts, or the positioning of certain elements. You can use CSS to create trendy animations and visual effects. You don’t need to know JavaScript or even HTML and create different kinds of animations and environments on your website.
Created by Takeshi Kano
This is a particle animation. You do not need JavaScript to build it. The whole idea of this background is to have particles moving randomly. Mank-image property creates a vignette effect.
Created by Casthra Demosthene
Created by Alison Quaglia
This animation uses Sassy CSS to achieve a multicolor floating orb effect. The colors are random and the orbs move slowly all over the screen. If you pay close attention you will see that each ‘orb’ is in reality represented by text. They are actually randomly generated shadows of a full point punctuation mark.
Created by Osorina Irina
This is an HTML and CSS background effect.
Created by Rune Sejer Hoffmann
This is an example demonstrating how to use SCSS to get a 3D effect by means of blur and perspective.
Created by Alison Quaglia
To achieve this background all you need to do is modify two things in the Floating Color Orbs code. Change the content from ‘.’ to ‘V’ and the loop text shadow value from 7px to 2px.
Created by Saransh Sinha
This animation adds an illusion of depth to your background creating a parallax scrolling stars effect. It uses a simple SASS function (to create a random star field on each load) and CSS animation keyframes.
Created by kootoopas
Created by Adam Abundis
Flexbox allows text to be centered both vertically and horizontally. Keyframes enable an infinite scroll.
CSS animated background created by Nate Wiley
This is a grayscale triangle animation.
Created by Nour Ibram
This is a perfect animation background for any online store home page. Try it instead of a regular, plain background.
Created by Alex Andrix
The creator of this animation was inspired by his trip to Tunisia where he wandered around following a stranger who insisted on showing him something.
The animation resembles a number of random forcefields that move in a labyrinth-resembling manner and never hit one another. After a certain number of steps, a spot becomes free.
Created by carpe numidium
This background only animates when you scroll. In the code, attach the fixed background image to the HTML. Assign an additional red color gradient with transparency and mixed-blend-mode to the body. The mixed-blend-mode property is responsible for determining how an element’s content will blend with the content of the element’s parent and background (MDN).
CSS animated background created by carpe numidium
This is another example of the parallax effect that gives your 2D background the illusion of depth. Using pure CSS you can layer background images one on another and then make them move at random speeds and in different directions.
Created by Anastasia Goodwin
Use CSS alone to create gentle sparkling stars with moving clouds.
Created by Sydney Hill
Attention catching white, flying text characters will attract visitors and is appealing to shop owners.
Created by Nate Wiley
This animation uses color gradients to give you the effect of colorful paint streaks running down the screen.
Created by Yusuke Nakaya
Two-color stripes moving diagonally across the screen with the word “warning” in the center.
Created by Noel Delgado
Created by Jacob Foster
Created by Igor Milenkovic
This background features a mountain with animations, it is slightly responsive.
Created by Liam Egan
Use your mouse or finger to move the comet on this CSS animated background.
Created by Yusuke Nakaya
Meteor shower effect.
Created by Vaibhav Arora
Created by Lewi Hussey
A very simple login screen with rotating squares floating up the screen.
Created by Andreas Wilcox
Created by Nate Wiley
Created by Bjorn
This is an HTML and CSS background animation.
Created by Manuel Pinto
Use only CSS to create a simple and clean diagonal gradient background animation.
Created by Rob DiMarzo
Triangles appear and disappear. Each division has a clip-path property to create a hexagon mask. When the hexagons smack together, the expanding triangles bleed evenly into the triangles of the adjoining hexagons until they disappear.
Created by Nash Vail
Created by Alexander
Created by Chris Neale
Created by Louis Hoebregts
Created by beshoy ekram
This is a very attractive animation. The purple and white mixed together moves in a very pleasant and appealing way that is sure to impress your visitors. It also allows you to add a title to the front end.
CSS animated background created by Uzo Awili
Created by Liam Egan
The effect of ash falling down from the burning sky.
Created by Cory Hughart
Created by Mike Golus
An elegant HTML and CSS only effect of subtle fireflies appearing and disappearing on the screen.
If you liked this article with CSS animated background examples, you should check out this one with CSS timeline examples.
We also wrote about similar topics like CSS gallery examples, HTML calendar snippets, CSS input text examples, CSS accordions, CSS animation examples, and styling radio buttons.