42+ CSS Animated Backgrounds

If you’re someone who has a creative appetite and is looking for stunning animated backgrounds made with CSS for your project, you’re on the right track.

In this compilation, we are showcasing 42+ HTML and CSS animated background examples that we’ve collected from reliable platforms like CodePen and GitHub.

Our team carefully selected and hand-picked each background example in our collection; whether it’s gradient animations, image slideshows, particle animations, patterns, or parralax effects, we have something for everyone.

We’ve curated the best animated background collection for web designers, developers, digital marketers, UX/UI designers, and graphic designers. These animated background code snippets come with a variety of design options; each item is easy to customise, ensuring a unique and memorable experience for your users that they will remember for a long time.

Let’s look at these 100% free CSS animated backgrounds that add dynamic movement and visual interest to website backgrounds, which can easily engage users, enhance aesthetics, and create a memorable browsing experience.

1. Floating Color Orbs

See the Pen <a href="https://codepen.io/hylobates-lar/pen/bGEQXgm"> Floating Color Orbs</a> by Alison Quaglia (<a href="https://codepen.io/hylobates-lar">@hylobates-lar</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alison Quaglia
Source: Code / Demo
Created on: JULY 20, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

2. ColorDrops

See the Pen <a href="https://codepen.io/natewiley/pen/PwWxRd"> ColorDrops</a> by Nate Wiley (<a href="https://codepen.io/natewiley">@natewiley</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nate Wiley
Source: Code / Demo
Created on: JANUARY 11, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

3. Lighthouse at Night | HTML + CSS + ParallaxJS

See the Pen <a href="https://codepen.io/CameronFitzwilliam/pen/ZJoENR"> Lighthouse at Night | HTML + CSS + ParallaxJS</a> by Cameron Fitzwilliam (<a href="https://codepen.io/CameronFitzwilliam">@CameronFitzwilliam</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cameron Fitzwilliam
Source: Code / Demo
Created on: AUGUST 21, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

4. Shooting Star

See the Pen <a href="https://codepen.io/alphardex/pen/RwrVoeL"> Shooting Star</a> by alphardex (<a href="https://codepen.io/alphardex">@alphardex</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: alphardex
Source: Code / Demo
Created on: JUNE 23, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

5. Pure CSS Particle Animation

See the Pen <a href="https://codepen.io/tonkotsuboy/pen/zJbKNN"> Pure CSS Particle Animation</a> by Takeshi Kano (<a href="https://codepen.io/tonkotsuboy">@tonkotsuboy</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Takeshi Kano
Source: Code / Demo
Created on: SEPTEMBER 21, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

6. Hearts animation background

See the Pen <a href="https://codepen.io/giaco/pen/BbpKZy"> Hearts animation background</a> by Pogany (<a href="https://codepen.io/giaco">@giaco</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Pogany
Source: Code / Demo
Created on: MARCH 6, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

7. css-only lava lamp

See the Pen <a href="https://codepen.io/szudi/pen/vrRyXK"> css-only lava lamp</a> by Janos Szudi (<a href="https://codepen.io/szudi">@szudi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Janos Szudi
Source: Code / Demo
Created on: JUNE 21, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. Animated Ripples background

See the Pen <a href="https://codepen.io/vaibhavarora/pen/xmpxjp"> Animated Ripples background </a> by Vaibhav Arora (<a href="https://codepen.io/vaibhavarora">@vaibhavarora</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vaibhav Arora
Source: Code / Demo
Created on: JANUARY 2, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS

9. Screensaver

See the Pen <a href="https://codepen.io/Softlink/pen/DvORKW"> Screensaver</a> by Softlink (<a href="https://codepen.io/Softlink">@Softlink</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Softlink
Source: Code / Demo
Created on: DECEMBER 15, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. SVG Animation Background

See the Pen <a href="https://codepen.io/thanks2music/pen/VmJjaG"> SVG Animation Background</a> by Yoshiyuki ITO (<a href="https://codepen.io/thanks2music">@thanks2music</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yoshiyuki ITO
Source: Code / Demo
Created on: DECEMBER 27, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

11. Infinite SVG Triangle Fusion

See the Pen <a href="https://codepen.io/robdimarzo/pen/VqjvqR"> Infinite SVG Triangle Fusion</a> by Rob DiMarzo (<a href="https://codepen.io/robdimarzo">@robdimarzo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rob DiMarzo
Source: Code / Demo
Created on: DECEMBER 16, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

12. One element CSS Snow

See the Pen <a href="https://codepen.io/keithclark/pen/DjXzBw"> One element CSS Snow</a> by Keith Clark (<a href="https://codepen.io/keithclark">@keithclark</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Keith Clark
Source: Code / Demo
Created on: DECEMBER 9, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

13. Canva moving background effect

See the Pen <a href="https://codepen.io/j1f/pen/ogGpZb"> Canva moving background effect</a> by Justin (<a href="https://codepen.io/j1f">@j1f</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Justin
Source: Code / Demo
Created on: FEBRUARY 3, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

14. Seeding

See the Pen <a href="https://codepen.io/yuanchuan/pen/ZqbVVL"> Seeding</a> by yuanchuan (<a href="https://codepen.io/yuanchuan">@yuanchuan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: yuanchuan
Source: Code / Demo
Created on: OCTOBER 2, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

15. CSS linear-gradient animations

See the Pen <a href="https://codepen.io/hexagoncircle/pen/Exyewjv"> CSS linear-gradient animations</a> by Ryan Mulligan (<a href="https://codepen.io/hexagoncircle">@hexagoncircle</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ryan Mulligan
Source: Code / Demo
Created on: NOVEMBER 7, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. October Falling Leaves CSS Animation #css no #javascript

See the Pen <a href="https://codepen.io/incrediblecast/pen/yLBmVXQ"> October Falling Leaves CSS Animation #css no #javascript</a> by Casthra Demosthene (<a href="https://codepen.io/incrediblecast">@incrediblecast</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Casthra Demosthene
Source: Code / Demo
Created on: OCTOBER 2, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. 2kb total size SVG animation

See the Pen <a href="https://codepen.io/ksenia-k/pen/jXbWaJ"> 2kb total size SVG animation</a> by Ksenia Kondrashova (<a href="https://codepen.io/ksenia-k">@ksenia-k</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ksenia Kondrashova
Source: Code / Demo
Created on: DECEMBER 12, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Pure CSS Fireworks

See the Pen <a href="https://codepen.io/ampersand_xyz/pen/dXVwYB"> Pure CSS Fireworks</a> by ampersand_xyz (<a href="https://codepen.io/ampersand_xyz">@ampersand_xyz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ampersand_xyz
Source: Code / Demo
Created on: JULY 11, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass)

19. Animated background

See the Pen <a href="https://codepen.io/fixcl/pen/WxeObg"> Animated background</a> by Marco Barría (<a href="https://codepen.io/fixcl">@fixcl</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Marco Barría
Source: Code / Demo
Created on: MAY 26, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

20. CSS Background Effect

See the Pen <a href="https://codepen.io/osorina/pen/PQdMOO"> CSS Background Effect</a> by Osorina Irina (<a href="https://codepen.io/osorina">@osorina</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Osorina Irina
Source: Code / Demo
Created on: FEBRUARY 25, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Sass)

21. Animated Background Gradient

See the Pen <a href="https://codepen.io/katmai7/pen/kYoWqQ"> Animated Background Gradient</a> by Hudyma Vitalii (<a href="https://codepen.io/katmai7">@katmai7</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hudyma Vitalii
Source: Code / Demo
Created on: FEBRUARY 2, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

22. Animated Background Canvas

See the Pen <a href="https://codepen.io/chintuyadav/pen/WXypLR"> Animated Background Canvas</a> by Chintu Yadav Sara (<a href="https://codepen.io/chintuyadav">@chintuyadav</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chintu Yadav Sara
Source: Code / Demo
Created on: NOVEMBER 24, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

23. pure CSS twinkling stars background

See the Pen <a href="https://codepen.io/agoodwin/pen/NMJoER"> pure CSS twinkling stars background</a> by Anastasia Goodwin (<a href="https://codepen.io/agoodwin">@agoodwin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Anastasia Goodwin
Source: Code / Demo
Created on: MAY 22, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

24. CSS only Pattern Animation

See the Pen <a href="https://codepen.io/t_afif/pen/OJvBbxm"> CSS only Pattern Animation</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: AUGUST 14, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

25. Pure Css Animated Background

See the Pen <a href="https://codepen.io/mohaiman/pen/MQqMyo"> Pure Css Animated Background</a> by Mohammad Abdul Mohaiman (<a href="https://codepen.io/mohaiman">@mohaiman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mohammad Abdul Mohaiman
Source: Code / Demo
Created on: FEBRUARY 25, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. responsive <!– No Div –> car

See the Pen <a href="https://codepen.io/abxlfazl/pen/NWrOBzg"> responsive <!– No Div –> car </a> by abxlfazl khxrshidi (<a href="https://codepen.io/abxlfazl">@abxlfazl</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: abxlfazl khxrshidi
Source: Code / Demo
Created on: NOVEMBER 9, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

27. Blurred animated gradients

See the Pen <a href="https://codepen.io/Jeromche/pen/KKQrGgP"> Blurred animated gradients</a> by Wil van der Tuin (<a href="https://codepen.io/Jeromche">@Jeromche</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Wil van der Tuin
Source: Code / Demo
Created on: JUNE 11, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

28. Animated Background

See the Pen <a href="https://codepen.io/MarcoGuglielmelli/pen/ExGYae"> Animated Background</a> by Marco Guglielmelli (<a href="https://codepen.io/MarcoGuglielmelli">@MarcoGuglielmelli</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Marco Guglielmelli
Source: Code / Demo
Created on: SEPTEMBER 23, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Stylus), JavaScript

29. Floating heart

See the Pen <a href="https://codepen.io/yuanchuan/pen/wZJqNK"> Floating heart</a> by yuanchuan (<a href="https://codepen.io/yuanchuan">@yuanchuan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: yuanchuan
Source: Code / Demo
Created on: APRIL 10, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. Parallax Star background in CSS

See the Pen <a href="https://codepen.io/sarazond/pen/LYGbwj"> Parallax Star background in CSS</a> by sarazond (<a href="https://codepen.io/sarazond">@sarazond</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: sarazond
Source: Code / Demo
Created on: APRIL 5, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(Sass), JavaScript

31. Sliding Diagonals Background Effect

See the Pen <a href="https://codepen.io/chris22smith/pen/RZogMa"> Sliding Diagonals Background Effect</a> by Chris Smith (<a href="https://codepen.io/chris22smith">@chris22smith</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Smith
Source: Code / Demo
Created on: AUGUST 4, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

32. CSS Fireflies

See the Pen <a href="https://codepen.io/mikegolus/pen/Jegvym"> CSS Fireflies</a> by Mike Golus (<a href="https://codepen.io/mikegolus">@mikegolus</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mike Golus
Source: Code / Demo
Created on: DECEMBER 7, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass)

33. Gradient background with waves

See the Pen <a href="https://codepen.io/baarbaracrr/pen/KKovmGb"> Gradient background with waves</a> by Bárbara Rodríguez (<a href="https://codepen.io/baarbaracrr">@baarbaracrr</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bárbara Rodríguez
Source: Code / Demo
Created on: JULY 25, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

34. Cloudy Spiral CSS animation

See the Pen <a href="https://codepen.io/hakimel/pen/kawJWE"> Cloudy Spiral CSS animation</a> by Hakim El Hattab (<a href="https://codepen.io/hakimel">@hakimel</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hakim El Hattab
Source: Code / Demo
Created on: JULY 4, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

35. CSS3 Animation: Background Color Cycle

See the Pen <a href="https://codepen.io/metagrapher/pen/AmvMJE"> CSS3 Animation: Background Color Cycle</a> by SJ Calamia (<a href="https://codepen.io/metagrapher">@metagrapher</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: SJ Calamia
Source: Code / Demo
Created on: DECEMBER 19, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

36. Single div CSS book search

See the Pen <a href="https://codepen.io/lynnandtonic/pen/VwwWXwR"> Single div CSS book search</a> by Lynn Fisher (<a href="https://codepen.io/lynnandtonic">@lynnandtonic</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lynn Fisher
Source: Code / Demo
Created on: OCTOBER 27, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Stylus)

37. Animation background #1

See the Pen <a href="https://codepen.io/cnupm99/pen/YPEbbv"> Animation background #1</a> by Maxim (<a href="https://codepen.io/cnupm99">@cnupm99</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Maxim
Source: Code / Demo
Created on: FEBRUARY 10, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

38. Bubble Float

See the Pen <a href="https://codepen.io/alphardex/pen/jOWMGON"> Bubble Float</a> by alphardex (<a href="https://codepen.io/alphardex">@alphardex</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: alphardex
Source: Code / Demo
Created on: JUNE 16, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

39. Animation Background || Only Css

See the Pen <a href="https://codepen.io/nouribram/pen/OzqNvJ"> Animation Background || Only Css</a> by Nour Ibram (<a href="https://codepen.io/nouribram">@nouribram</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nour Ibram
Source: Code / Demo
Created on: JANUARY 22, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

40. Only CSS: 3D Scan

See the Pen <a href="https://codepen.io/YusukeNakaya/pen/OGwmOV"> Only CSS: 3D Scan</a> by Yusuke Nakaya (<a href="https://codepen.io/YusukeNakaya">@YusukeNakaya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yusuke Nakaya
Source: Code / Demo
Created on: FEBRUARY 28, 2028
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

41. Pure CSS Gradient Background Animation

See the Pen <a href="https://codepen.io/P1N2O/pen/pyBNzX"> Pure CSS Gradient Background Animation</a> by Manuel Pinto (<a href="https://codepen.io/P1N2O">@P1N2O</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Manuel Pinto
Source: Code / Demo
Created on: MAY 13, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

42. Image Animation Background!

See the Pen <a href="https://codepen.io/antoniasymeonidou/pen/NWpgoJo"> Image Animation Background!</a> by NANOUU (<a href="https://codepen.io/antoniasymeonidou">@antoniasymeonidou</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: NANOUU
Source: Code / Demo
Created on: MAY 26, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

43. Rain Animation Background

See the Pen <a href="https://codepen.io/Ali-Tec/pen/jObjNdL"> Rain Animation Background</a> by ali-tec (<a href="https://codepen.io/Ali-Tec">@Ali-Tec</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ali-tec
Source: Code / Demo
Created on: MAY 28, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS