Collection of free HTML and CSS animated background code examples.

12 CSS Animated Backgrounds

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

Related Articles

  1. CSS Background Patterns
  2. CSS Fixed Backgrounds
  3. CSS Particle Backgrounds

  4. CSS Triangle Backgrounds

  5. CSS Parallax Effects
  6. 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