A Collection of hand-picked free Animated Backgrounds Effects With css code examples.

1.FALLING LEAVES CSS ANIMATION

October falling leaves CSS animation CSS no JavaScript.

Made with

1
2
Html
Css/SCSS

Author

1
Casthra Demosthene

Demo


2.NOISE BACKGROUND

CSS only animated static noise background.

Made with

1
2
Html
Css/SCSS

Author

1
Mathieu S.

Demo


3.PATTERN ANIMATION (INFINITE)

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

Made with

1
2
Html
Css/SCSS

Author

1
Adam Abundis

Demo


4.ONLY CSS: WARNING

Stripe background.

Made with

1
2
Html
Css/SCSS

Author

1
Yusuke Nakaya

Demo


5.COOL MOUNTAIN BACKGROUND

Cool mountain background with animations - slightly responsive.

Made with

1
HTML / CSS (Less)

Author

1
Igor Milenkovic

Demo


6.ANIMATED RIPPLES BACKGROUND

Made with

1
2
Html
Css/SCSS

Author

1
Vaibhav Arora

Demo


7.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;

Made with

1
HTML (Pug) / CSS (SCSS)

Author

1
Rob DiMarzo

Demo


8.ANIMATED CSS MASK-IMAGE GRADIENT

Made with

1
2
Html
Css/SCSS

Author

1
Chris Neale

Demo


9.CSS FIREFLIES

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

Made with

1
2
Html
Css/SCSS

Author

1
Mike Golus

Demo


10.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.

Made with

1
2
Html
Css/SCSS

Author

1
Takeshi Kano

Demo


11.PURE CSS TWINKLING STARS BACKGROUND

Subtle twinkling stars and moving clouds animation using only CSS.

Made with

1
2
Html
Css/SCSS

Author

1
Anastasia Goodwin

Demo


12.BACKGROUND EFFECT

HTML and CSS background effect.

Made with

1
2
Html
Css/SCSS

Author

1
osorina irina

Demo


13.PURE CSS ANIMATED BACKGROUND

Pure CSS animated background.

Made with

1
2
Html
Css/SCSS

Author

1
Mohammad Abdul Mohaiman

Demo


14.SLIDING DIAGONALS BACKGROUND EFFECT

An animated background under the content.

Made with

1
2
Html
Css/SCSS

Author

1
Chris Smith

Demo


15.ANIMATED BACKGROUND

Made with

1
2
Html
Css/SCSS

Author

1
Chandan Choudhary

Demo