12 CSS Animated Backgrounds

Collection of hand-picked free HTML and CSS animated background code examples.

Related Articles

1. CSS Background Patterns
2. jQuery Background Plugins

About the code

Animated Ripples Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Infinite SVG Triangle Fusion

Triangles are created. Triangles are destroyed.
And so on and so forth. I am creating 60 SVGs that each contain 4 triangles (polygons). Each polygon loops through a 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 corresponds to a row and moved them up and over via transform: translate;

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Animated CSS Mask-Image Gradient

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

CSS Fireflies

An elegant HTML/CSS only solution for adding a tranquil fireflies effect to you page.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Pure CSS Twinkling Stars Background

Subtle twinkling stars and moving clouds animation using only CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Background Effect

HTML and CSS background effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Pure CSS Animated Background

Pure CSS animated background.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Sliding Diagonals Background Effect

An animated background under the content.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Background Animation

HTML and CSS background animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Animated Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Pure CSS3 Gradient Background Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

CSS Background Animation

Example of background animation using CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Infinite Background Animation

Pure CSS infinite background animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -