Post thumbnail: 12 CSS Animated Backgrounds

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

Author

  • Vaibhav Arora

Made with

  • HTML (Haml) / CSS

About the code

Animated Ripples Background

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

Dependencies: -

Author

  • Rob DiMarzo

Made with

  • HTML (Pug) / CSS (SCSS)

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: -

Author

  • Chris Neale

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

About the code

Animated CSS Mask-Image Gradient

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Author

  • Mike Golus

Made with

  • HTML (Pug) / CSS (Sass)

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: -

Author

  • Anastasia Goodwin

Made with

  • HTML / CSS (SCSS)

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: -

Author

  • osorina irina

Made with

  • HTML / CSS (Sass)

About the code

Background Effect

HTML and CSS background effect.

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

Dependencies: -

Author

  • Mohammad Abdul Mohaiman

Made with

  • HTML / CSS

About the code

Pure CSS Animated Background

Pure CSS animated background.

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

Dependencies: -

Author

  • Chris Smith

Made with

  • HTML / CSS

About the code

Sliding Diagonals Background Effect

An animated background under the content.

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

Dependencies: -

Author

  • Bjorn

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Background Animation

HTML and CSS background animation.

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

Dependencies: -

Demo image: Animated Background

Author

  • Chandan Choudhary

Made with

  • HTML / CSS

About the code

Animated Background

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

Dependencies: -

Author

  • Manuel Pinto

Made with

  • HTML / CSS

About the code

Pure CSS3 Gradient Background Animation

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

Dependencies: -

Author

  • S├ępion

Made with

  • HTML / CSS

About the code

CSS Background Animation

Example of background animation using CSS.

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

Dependencies: -

Author

  • kootoopas

Made with

  • CSS (SCSS)

About the code

Infinite Background Animation

Pure CSS infinite background animation.

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

Dependencies: -

back to top