Collection of hand-picked free HTML and CSS animated backgrounds code examples.
ANIMATED RIPPLES BACKGROUND
Compatible browsers:Chrome, Edge, Firefox, Opera, Safari and made with HTML (Haml) / CSS by Vaibhav Arora
INFINITE SVG TRIANGLE FUSION
Triangles are created. Triangles are destroyed. And so on and so forth. I am creating 60 SVGs that each contains 4 triangles (polygons). Each polygon loops through color and animates outward from the center point of its parent SVG every 1 second. The entire animation repeats infinitely every 4 seconds. Each div has a clip-path to create a hexagon mask. When the hexagons are snapped together, the expanding triangles bleed evenly into the triangles of the adjacent hexagons until they disappear. I used CSS Grid as a starting point, but I was still left with a bunch of well-mannered hexagons with empty space in between. To “connect” the hexagons, I identified the nth-children that correspond to a row and moved them up and over via transform: translate; made with HTML (Pug) / CSS (SCSS) by Rob DiMarzo.
ANIMATED CSS MASK-IMAGE GRADIENT
Compatible browsers:Chrome, Firefox, Opera, Safari. made with HTML / CSS (SCSS) / JavaScript (Babel) by Chris Neale.
CSS FIREFLIES – Css Animated Backgrounds
An elegant HTML/CSS only solution for adding a tranquil fireflies effect to your page. made with HTML (Pug) / CSS (Sass) by Mike Golus.
PURE CSS TWINKLING STARS BACKGROUND
Subtle twinkling stars and moving clouds animation using the only CSS.made with HTML / CSS (SCSS) by Anastasia Goodwin.
BACKGROUND EFFECT
HTML and CSS background effect.Made with HTML / CSS (Sass) by osorina irina
PURE CSS ANIMATED BACKGROUND
Pure CSS animated background.Made with HTML / CSS by Mohammad Abdul Mohaiman.
SLIDING DIAGONALS BACKGROUND EFFECT
An animated background under the content. made with HTML / CSS by Chris Smith
BACKGROUND ANIMATION
HTML and CSS background animation. made with HTML (Pug) / CSS (SCSS) by Bjorn.
ANIMATED BACKGROUND
made with HTML / CSS by Chandan Choudhary
PURE CSS3 GRADIENT BACKGROUND ANIMATION
made with HTML / CSS by Manuel Pinto
CSS BACKGROUND ANIMATION
Example of background animation using CSS. made with HTML / CSS by Sépion.
INFINITE BACKGROUND ANIMATION
Pure CSS infinite background animation.Made with CSS (SCSS) by kootoopas