Collection of hand-picked free HTML and CSS animated background code examples. Update of January 2019 collection. 7 new items.

Related Articles

  1. CSS Background Patterns
  2. CSS Fixed Backgrounds
  3. CSS Particle Backgrounds
  4. CSS Triangle Backgrounds
  5. JavaScript Background Effects
  6. jQuery Background Plugins

Author

  • Casthra Demosthene

Made with

  • HTML / CSS

About a code

Falling Leaves CSS Animation

October falling leaves CSS animation CSS no JavaScript.

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

Responsive: yes

Dependencies: -

Author

  • Mathieu S.

Made with

  • HTML / CSS

About a code

Noise Background

CSS only animated static noise background.

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

Responsive: yes

Dependencies: -

Author

  • Adam Abundis

Made with

  • HTML / CSS

About a code

Pattern Animation (Infinite)

Used Flexbox to vertically and horizontally center text. Used keyframes to set an infinite scroll.

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

Responsive: yes

Dependencies: -

Author

  • Yusuke Nakaya

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Only CSS: Warning

Stripe background.

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

Responsive: yes

Dependencies: -

Author

  • Igor Milenkovic

Made with

  • HTML / CSS (Less)

About a code

Cool Mountain Background

Cool mountain background with animations - slightly responsive.

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

Responsive: yes

Dependencies: -

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

  • Takeshi Kano

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Particle Animation

CSS particle animation without JavaScript. The most important point is random movement of particles. The vignetting was created by mask-image property.

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

Responsive: yes

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