Table of Contents

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

Demo and Download Code

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.

Demo and Download Code

ANIMATED CSS MASK-IMAGE GRADIENT

Compatible browsers:Chrome, Firefox, Opera, Safari. made with HTML / CSS (SCSS) / JavaScript (Babel) by Chris Neale.

Demo and Download Code

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.

Demo and Download Code

PURE CSS TWINKLING STARS BACKGROUND

Subtle twinkling stars and moving clouds animation using the only CSS.made with HTML / CSS (SCSS) by Anastasia Goodwin.

Demo and Download Code

BACKGROUND EFFECT

HTML and CSS background effect.Made with HTML / CSS (Sass) by osorina irina

Demo and Download Code

PURE CSS ANIMATED BACKGROUND

Pure CSS animated background.Made with HTML / CSS by Mohammad Abdul Mohaiman.

Demo and Download Code

SLIDING DIAGONALS BACKGROUND EFFECT

An animated background under the content. made with HTML / CSS by Chris Smith

Demo and Download Code

BACKGROUND ANIMATION

HTML and CSS background animation. made with HTML (Pug) / CSS (SCSS) by  Bjorn.

Demo and Download Code

ANIMATED BACKGROUND

made with HTML / CSS by Chandan Choudhary

Demo and Download Code

PURE CSS3 GRADIENT BACKGROUND ANIMATION

made with HTML / CSS by Manuel Pinto

Demo and Download Code

CSS BACKGROUND ANIMATION

Example of background animation using CSS. made with HTML / CSS by Sépion.

Demo and Download Code

INFINITE BACKGROUND ANIMATION

Pure CSS infinite background animation.Made with CSS (SCSS) by kootoopas

Demo and Download Code

Categorized in:

HTML,

Tagged in:

, , , , , , , ,