42+ CSS Animated Backgrounds

Best 42+ HTML and CSS animated background code examples for web designers, developers, and UI/UX creatives, sourced from reliable platforms like CodePen and GitHub. Explore now!

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