If you are looking for a mesmerising collection of 35+ CSS animated backgrounds to give a dynamic feel to your website, this is the place where you should have been before.
We have collected all these animated background effects from reliable platforms like GitHub and CodePen. In this post, we will demonstrate some very beautiful and attractive free HTML and CSS animated background code examples.
Animated backgrounds can significantly enhance the user’s interaction on various digital platforms, including websites, presentations, videos, and even social media profiles. It refers to the use of CSS to make the background of any website more attractive, dynamic, and visually stunning.
CSS animations allow designers and developers to add movement, transitions, or other dynamic effects to enhance the visual appeal and interactivity of the webpage.
Each CSS background example is carefully chosen; these captivating background animations show the true power of CSS and JavaScript, which allow web designers and developers to implement trendy, modern, and eye-catching animation effects on their web projects and web app pages.
These examples contain a plethora of background effects, such as particle effects, animated textures, parallax scrolling, and video backgrounds. You can use these effects to enhance the visual appeal of your website.
So without wasting much time, let’s explore free CSS animated background code examples.
01. Rainbow Lines of Straightness
See the Pen
rainbow lines of straightness by Matei Copot (@towc)
on CodePen.
Author: Matei Copot @towc
Links: Source Code / Demo
Created on: May 22, 2015
Made with: HTML, CSS, JS
02. Ambient Background
See the Pen
Ambient Background by Dimitra Vasilopoulou (@mimikos)
on CodePen.
Author: Dimitra Vasilopoulou @mimikos
Links: Source Code / Demo
Created on: October 13, 2015
Made with: HTML, CSS, JS
03. CSS only Pattern Animation
See the Pen
CSS only Pattern Animation by Temani Afif (@t_afif)
on CodePen.
Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: August 14, 2022
Made with: HTML, CSS
04. Chameleon Background by Roland Warmerdam
See the Pen
Chameleon background by Roland Warmerdam (@Rowno)
on CodePen.
Author: Roland Warmerdam @Rowno
Links: Source Code / Demo
Created on: October 25, 2015
Made with: HTML, CSS, SCSS
05. Floating Heart
See the Pen
Floating heart by yuanchuan (@yuanchuan)
on CodePen.
Author: yuanchaun @yuanchuan
Links: Source Code / Demo
Created on: April 10, 2019
Made with: HTML, CSS
06. Pure CSS Animated Background
See the Pen
Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman)
on CodePen.
Author: Mohammad Abdul Mohaiman @mohaiman
Links: Source Code / Demo
Created on: February 25, 2018
Made with: HTML, CSS
07. CSS Fireflies
See the Pen
CSS Fireflies by Mike Golus (@mikegolus)
on CodePen.
Author: Mike Golus @mikegolus
Links: Source Code / Demo
Created on: December 07, 2018
Made with: HTML(Pug), CSS(Sass)
08. Infinite SVG Triangle Fusion
See the Pen
Infinite SVG Triangle Fusion by Rob DiMarzo (@robdimarzo)
on CodePen.
Author: Rob DiMarzo @robdimarzo
Links: Source Code / Demo
Created on: December 16, 2018
Made with: HTML(Pug), CSS, SCSS
09. Floating Color Orbs
See the Pen
Floating Color Orbs by Alison Quaglia (@hylobates-lar)
on CodePen.
Author: Alison Quaglia @hylobates-lar
Links: Source Code / Demo
Created on: July 20, 2020
Made with: HTML, CSS, SCSS
10. SVG Animation Background
See the Pen
SVG Animation Background by Yoshiyuki ITO (@thanks2music)
on CodePen.
Author: Yoshiyuki ITO @thanks2music
Links: Source Code / Demo
Created on: December 27, 2016
Made with: HTML, CSS
11. Blurred Animated Gradients
See the Pen
Blurred animated gradients by Wil van der Tuin (@Jeromche)
on CodePen.
Author: Wil van der Tuin @Jeromche
Links: Source Code / Demo
Created on: June 11, 2022
Made with: HTML, CSS, SCSS, JS (Babel)
12. Animated Ripples Background
See the Pen
Animated Ripples background by Vaibhav Arora (@vaibhavarora)
on CodePen.
Author: Vaibhav Arora @vaibhavarora
Links: Source Code / Demo
Created on: January 02, 2019
Made with: HTML(Haml), CSS
13. CSS Linear Gradient Animations
See the Pen
CSS linear-gradient animations by Ryan Mulligan (@hexagoncircle)
on CodePen.
Author: Ryan Mulligan @hexagoncircle
Links: Source Code / Demo
Created on: November 07, 2020
Made with: HTML, CSS
14. 2kb Total Size SVG Animation
See the Pen
2kb total size SVG animation by Ksenia Kondrashova (@ksenia-k)
on CodePen.
Author: Ksenia Kondrashova @ksenia-k
Links: Source Code / Demo
Created on: December 12, 2018
Made with: HTML, CSS
15. Sliding Diagonals Background Effect
See the Pen
Sliding Diagonals Background Effect by Chris Smith (@chris22smith)
on CodePen.
Author: Chris Smith @chris22smith
Links: Source Code / Demo
Created on: August 04, 2017
Made with: HTML, CSS
16. Gradient Background with Waves
See the Pen
Gradient background with waves by Bárbara Rodríguez (@baarbaracrr)
on CodePen.
Author: Bárbara Rodríguez @baarbaracrr
Links: Source Code / Demo
Created on: July 25, 2022
Made with: HTML, CSS
17. Hearts Animation Background
See the Pen
Hearts animation background by Pogany (@giaco)
on CodePen.
Author: Pogany @giaco
Links: Source Code / Demo
Created on: March 06, 2019
Made with: HTML, CSS, JS
18. CSS Background Effect
See the Pen
CSS Background Effect by Osorina Irina (@osorina)
on CodePen.
Author: osorina irina @osorina
Links: Source Code / Demo
Created on: February 25, 2018
Made with: HTML, CSS (Sass)
19. Shooting Star
See the Pen
Shooting Star by alphardex (@alphardex)
on CodePen.
Author: alphardex @alphardex
Links: Source Code / Demo
Created on: June 23, 2020
Made with: HTML, CSS
20. Bubble Float
See the Pen
Bubble Float by alphardex (@alphardex)
on CodePen.
Author: alphardex @alphardex
Links: Source Code / Demo
Created on: June 16, 2020
Made with: HTML, CSS, SCSS
21. Screensaver
See the Pen
Screensaver by Softlink (@Softlink)
on CodePen.
Author: Softlink @Softlink
Links: Source Code / Demo
Created on: December 15, 2012
Made with: HTML, CSS
22. Color Drops
See the Pen
ColorDrops by Nate Wiley (@natewiley)
on CodePen.
Author: Nate Wiley @natewiley
Links: Source Code / Demo
Created on: January 11, 2015
Made with: HTML(Haml), CSS, SCSS
23. Animated Background Canvas
See the Pen
Animated Background Canvas by Chintu Yadav Sara (@chintuyadav)
on CodePen.
Author: Chintu Yadav Sara @chintuyadav
Links: Source Code / Demo
Created on: November 24, 2017
Made with: HTML, CSS, JS
24. Pure CSS Twinkling Stars Background
See the Pen
pure CSS twinkling stars background by Anastasia Goodwin (@agoodwin)
on CodePen.
Author: Anastasia Goodwin @agoodwin
Links: Source Code / Demo
Created on: May 22, 2018
Made with: HTML, CSS, SCSS
25. Lighthouse at Night
See the Pen
Lighthouse at Night | HTML + CSS + ParallaxJS by Cameron Fitzwilliam (@CameronFitzwilliam)
on CodePen.
Author: Cameron Fitzwilliam @CameronFitzwilliam
Links: Source Code / Demo
Created on: August 21, 2017
Made with: HTML(Pug), CSS, SCSS, JS
26. Pure CSS Gradient Background Animation
See the Pen
Pure CSS Gradient Background Animation by Manuel Pinto (@P1N2O)
on CodePen.
Author: Manuel Pinto @P1N2O
Links: Source Code / Demo
Created on: May 13, 2016
Made with: HTML, CSS
27. Animated Background Gradient
See the Pen
Animated Background Gradient by katmai7 (@katmai7)
on CodePen.
Author: katmai7 @katmai7
Links: Source Code / Demo
Created on: February 02, 2014
Made with: HTML(Pug), CSS
28. Seeding
See the Pen
Seeding by yuanchuan (@yuanchuan)
on CodePen.
Author: yuanchan @yuanchuan
Links: Source Code / Demo
Created on: October 02, 2018
Made with: HTML, CSS
29. Canva Moving Background Effect
See the Pen
Canva moving background effect by Justin (@j1f)
on CodePen.
Author: Justin @j1f
Links: Source Code / Demo
Created on: February 03, 2015
Made with: HTML, CSS, JS
30. Background
See the Pen
Background by Chandan Choudhary (@Cancepto)
on CodePen.
Author: Chandan Choudhary @Cancepto
Links: Source Code / Demo
Created on: May 17, 2016
Made with: HTML, CSS
31. October Falling Leaves CSS Animation
See the Pen
October Falling Leaves CSS Animation #css no #javascript by Casthra Demosthene (@incrediblecast)
on CodePen.
Author: Casthra Demosthene @incrediblecast
Links: Source Code / Demo
Created on: October 02, 2019
Made with: HTML, CSS
32. One Element CSS Snow
See the Pen
One element CSS Snow by Keith Clark (@keithclark)
on CodePen.
Author: Keith Clark @keithclark
Links: Source Code / Demo
Created on: December 09, 2013
Made with: HTML, CSS, SCSS
33. Hexagon Background
See the Pen
Tessellation #1 (Hexagon background with 0 HTML) by Temani Afif (@t_afif)
on CodePen.
Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: July 20, 2021
Made with: HTML, CSS
34. Animated Background
See the Pen
Animated Background by Marco Guglielmelli (@MarcoGuglielmelli)
on CodePen.
Author: Marco Guglielmelli @MarcoGuglielmelli
Links: Source Code / Demo
Created on: September 23, 2014
Made with: HTML, CSS, JS
35. Bubble Background Animation
See the Pen
Bubble background animation by Diyorbek Olimov (@diyorbek0309)
on CodePen.
Author: Diyorbek Olimov @diyorbek0309
Links: Source Code / Demo
Created on: August 21, 2021
Made with: HTML, CSS
36. Floating Color Orbs
See the Pen
Floating Color Orbs by Alison Quaglia (@hylobates-lar)
on CodePen.
Author: Alison Quaglia @hylobates-lar
Links: Source Code / Demo
Created on: July 20, 2020
Made with: HTML, CSS, SCSS
37. Parallax Star Background in CSS
See the Pen
Parallax Star background in CSS by sarazond (@sarazond)
on CodePen.
Author: Sarazond @sarazond
Links: Source Code / Demo
Created on: April 05, 2014
Made with: HTML, CSS (Sass)
38. Animation background
See the Pen
Animation background #1 by Maxim (@cnupm99)
on CodePen.
Author: Maxim @cnupm99
Links: Source Code / Demo
Created on: February 10, 2015
Made with: HTML, CSS, JS