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.
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
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
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
More Awesome Lists:
Share: