30 Cool CSS Animated Backgrounds (Free Code + Demos)
Enjoy these 100% free HTML and CSS animated background code examples. They are stunning and will wow your visitors. The pure CSS is easy to install into your web project.
1. CSS Fireflies
An elegant HTML/CSS only solution for adding a tranquil fireflies effect to you page.
Author: Mike Golus (mikegolus)
Links: Source Code / Demo
Created on: December 6, 2018
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: fireflies, firefly, random, particles
2. Animated Ripples Background
Author: Vaibhav Arora (vaibhavarora)
Links: Source Code / Demo
Created on: January 1, 2019
Made with: Haml, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Haml
3. Infinite SVG Triangle Fusion
Author: Rob DiMarzo (robdimarzo)
Links: Source Code / Demo, Giphy.com
Created on: December 16, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: svg, illusion, triangle, trippy, psychedelic
4. Pure CSS Gradient Background Animation
A simple and clean gradient background animation using only CSS. As used on https://manuelpinto.in
Author: Manuel Pinto (P1N2O)
Links: Source Code / Demo, Manuelpinto.in
Created on: May 13, 2016
Made with: HTML, CSS, JS
Tags: css, gradient, animated-background, gradient-background
5. Only CSS: Warning
Stripe Background :)
Author: Yusuke Nakaya (YusukeNakaya)
Links: Source Code / Demo
Created on: May 17, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, animation, transition
6. Cool Mountain Background With Animations - Slightly Responsive
Author: Igor Milenkovic (imilenig)
Links: Source Code / Demo
Created on: February 15, 2019
Made with: HTML, Less
Tags: background, boxes, effect, background effect, animation
7. Pure CSS Twinkling Stars Background
Subtle twinkling stars and moving clouds animation using only css.
Author: Anastasia Goodwin (agoodwin)
Links: Source Code / Demo
Created on: May 22, 2018
Made with: HTML, SCSS
Tags: moon, stars, twinkle, css-animation
8. Animated CSS Mask-image Gradient
Author: Chris Neale (onion2k)
Links: Source Code / Demo
Created on: December 9, 2018
Made with: HTML, SCSS, Babel
9. Pure Css Infinite Background Animation
Author: kootoopas (kootoopas)
Links: Source Code / Demo
Created on: December 4, 2013
Made with: SCSS
Tags: background, scrolling, animation, css-only, infinity
10. Sliding Diagonals Background Effect
An animated background under the content.
Author: Chris Smith (chris22smith)
Links: Source Code / Demo
Created on: August 4, 2017
Made with: HTML, CSS
Tags: animated-background, diagonal split, css diagonal
11. October Falling Leaves CSS Animation (No Javascript)
Author: Casthra Demosthene (incrediblecast)
Links: Source Code / Demo
Created on: October 1, 2019
Made with: HTML, CSS
12. Pure Css Animated Background
Pure Css Animated Background Down to upside!!!
Author: Mohammad Abdul Mohaiman (mohaiman)
Links: Source Code / Demo
Created on: February 25, 2018
Made with: HTML, CSS, JS
Tags: css animated background, css3-animation, background-animation
13. Sliding Diagonals Background Effect
An animated background under the content.
Author: Chris Smith (chris22smith)
Links: Source Code / Demo
Created on: August 4, 2017
Made with: HTML, CSS
Tags: animated-background, diagonal split, css diagonal
14. Pure CSS Gradient Background Animation
A simple and clean gradient background animation using only CSS. As used on https://manuelpinto.in
Author: Manuel Pinto (P1N2O)
Links: Source Code / Demo
Created on: May 13, 2016
Made with: HTML, CSS, JS
Tags: css, gradient, animated-background, gradient-background
15. 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.
Author: Takeshi Kano (tonkotsuboy)
Links: Source Code / Demo
Created on: September 21, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, particle, animation
16. CSS Only Animated Static Noise Background
Author: Mathieu S. (iceable)
Links: Source Code / Demo
Created on: September 27, 2019
Made with: HTML, CSS
17. Pattern Animation (Infinite)
Author: Adam Abundis (adamabundis)
Created on: September 27, 2019
Made with: HTML, CSS
Tags: keyframes, infinite, css3, scroll, background
18. Blue CSS Background
Pure Css Animated Background Down to upside!!!
Author: Mohammad Abdul Mohaiman (mohaiman)
Links: Source Code / Demo
Created on: February 25, 2018
Made with: HTML, CSS, JS
Tags: css animated background, css3-animation, background-animation
19. Sépion CSS Background Animation 2
Example of background animation using CSS. Test 2 for the new design of my website.
Author: Sépion (Sepion)
Links: Source Code / Demo
Created on: January 13, 2016
Made with: HTML, CSS
Tags: svg, animation, css, background
20. NeuroFunkGrid Video Background
CSS only version of the NeuroFunkGrid's video background used for most videos
Author: FrontHendrik (fronthendrik)
Links: Source Code / Demo
Created on: February 20, 2019
Made with: HTML, SCSS
Tags: animated-background, background, dnb
21. Animated Background
This is a demo of the animated background using only css.
Author: Sushant Sharma (sushantsharma20)
Links: Source Code / Demo
Created on: May 30, 2019
Made with: HTML, CSS
Tags: animated-background
22. Pure CSS 3D Sky
Author: Anthony Sanchez (tn9nex)
Links: Source Code / Demo
Created on: February 1, 2018
Made with: HTML, SCSS
Tags: css, 3d, animation, animated-background, css-animation
23. Donuts Background
Simple animated background using vector donuts which I've made.
Author: Charles Swierczek (karolsw3)
Links: Source Code / Demo
Created on: January 12, 2018
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: donuts, animated-background, impressive background, animations
24. Animated Login Background
Animated Login Background Inspired from dribbble shot: https://dribbble.com/shots/1187493-Log-in-GIF-animation
Author: StyleShit (EvyatarDa)
Links: Source Code / Demo
Created on: July 14, 2017
Made with: HTML, CSS
Tags: login, background, video, animated-background
25. Animated CSS Stars / Galaxy Background
Star Night Sky With Shooting Star. Inspired by Danny Brown's Pen: http://codepen.io/csengineer13/pen/ORqvZy
Author: John Garcia (johnbgarcia)
Links: Source Code / Demo
Created on: November 8, 2016
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: shooting star, css-animation, animated-background, codevember
26. Letter-spacing Animation
Author: Naomi Hauret (naomihauret)
Links: Source Code / Demo
Created on: May 2, 2017
Made with: HTML, SCSS, JS
Tags: animation, letter-spacing, text-animation, background-text, animated-background
27. Animating Gradient With CSS
Subtle animated gradient with a clean logo draw in.
Author: Cody Curley (codycurley)
Links: Source Code / Demo
Created on: June 2, 2015
Made with: HTML, SCSS, JS
Tags: gradient, animated, animated-background
28. ACOR
Forked from J. James Rockhill's Pen /r/web_design business card entry.
Author: Bailh (cathbailh)
Links: Source Code / Demo
Created on: December 2, 2014
Made with: HTML, CSS
Tags: pure-css, animated-background, opacity, yellow, pattern
29. Animal Crossing - Detail Background
CSS recreation of the background used for detail screens in Animal Crossing. Example: http://newleafhq.com/images/furniture/regal-sofa.jpg
Author: Amanda Cifaldi (algcifaldi)
Links: Source Code / Demo
Created on: April 6, 2015
Made with: HTML, CSS
Tags: animal crossing, css, background, animated-background
More Awesome Lists:
Share: