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

Html
Css/SCSS

Author

Casthra Demosthene

Demo

2.NOISE BACKGROUND

CSS only animated static noise background.

Made with

Html
Css/SCSS

Author

Mathieu S.

Demo

3.PATTERN ANIMATION (INFINITE)

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

Made with

Html
Css/SCSS

Author

Adam Abundis

Demo

4.ONLY CSS: WARNING

Stripe background.

Made with

Html
Css/SCSS

Author

Yusuke Nakaya

Demo

5.COOL MOUNTAIN BACKGROUND

Cool mountain background with animations - slightly responsive.

Made with

HTML / CSS (Less)

Author

Igor Milenkovic

Demo

6.ANIMATED RIPPLES BACKGROUND

Made with

Html
Css/SCSS

Author

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

HTML (Pug) / CSS (SCSS)

Author

Rob DiMarzo

Demo

8.ANIMATED CSS MASK-IMAGE GRADIENT

Made with

Html
Css/SCSS

Author

Chris Neale

Demo

9.CSS FIREFLIES

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

Made with

Html
Css/SCSS

Author

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

Html
Css/SCSS

Author

Takeshi Kano

Demo

11.PURE CSS TWINKLING STARS BACKGROUND

Subtle twinkling stars and moving clouds animation using only CSS.

Made with

Html
Css/SCSS

Author

Anastasia Goodwin

Demo

12.BACKGROUND EFFECT

HTML and CSS background effect.

Made with

Html
Css/SCSS

Author

osorina irina

Demo

13.PURE CSS ANIMATED BACKGROUND

Pure CSS animated background.

Made with

Html
Css/SCSS

Author

Mohammad Abdul Mohaiman

Demo

14.SLIDING DIAGONALS BACKGROUND EFFECT

An animated background under the content.

Made with

Html
Css/SCSS

Author

Chris Smith

Demo

15.ANIMATED BACKGROUND

Made with

Html
Css/SCSS

Author

Chandan Choudhary

Demo