If you are looking for an amazing collection of CSS particle backgrounds to give a dynamic feel to your website, then this article is best for you. In this post, we have the best collections of particle backgrounds created using HTML, CSS, and JavaScript examples, which we collected from reliable platforms like GitHub and CodePen.
We have added 15 more examples of latest CSS particle backgrounds in our curated collections to mesmerize your site visitors
CSS particle backgrounds are visually engaging effects created using CSS to generate small graphical elements that move across the screen in different patterns. These effects are designed to enhance websites visually, making them look dynamic, vibrant, and visually appealing to visitors.
Frontend developers can utilize CSS to style background colors, sizes, animations, and positions. By manipulating these properties, designers can create effects such as floating particles, snowfall, rain, twinkling stars, and other captivating visual experiences. These effects can enhance interactivity or purely add aesthetic appeal to a webpage.
Feel free to explore our highly customizable, hand-picked CSS particle background examples to elevate the design of your project by adding an interactive and lively dimension to web pages.
01. Particles Background
See the Pen
Particles Background by Nenad (@technovore)
on CodePen.
Author: Nenad @technovore
Links: Source Code / Demo
Created on: May 11, 2015
Made with: HTML, CSS, JS
02. How To Create An Animated Particle Background Using CSS And JavaScript
See the Pen
How to create an animated particle background using CSS and JavaScript – the CSS-only approach by Envato Tuts+ (@tutsplus)
on CodePen.
Author: Envato Tuts+ @tutsplus
Links: Source Code / Demo
Created on: December 21, 2017
Made with: HTML, CSS, SCSS
03. Random Particles Animation
See the Pen
SASS only – Random particles animation by Rémi Denimal (@remid)
on CodePen.
Author: Rémi Denimal @remid
Links: Source Code / Demo
Created on: July 18, 2017
Made with: HTML(HAML), SASS
04. CSS Particle
See the Pen
CSS Particles by Dronca Raul (@rauldronca)
on CodePen.
Author: Dronca Raul @rauldronca
Links: Source Code / Demo
Created on: October 24, 2018
Made with: HTML(HAML), CSS, SCSS
05. CSS Particle Style Animation.
See the Pen
CSS particle style animation. by John (@Johnm__)
on CodePen.
Author: John @Johnm__
Links: Source Code / Demo
Created on: March 16, 2016
Made with: HTML(HAML), CSS, SCSS
06. CSS Particles Animation
See the Pen
css particles animation by Noel C (@noeldevelops)
on CodePen.
Author: Noel C @noeldevelops
Links: Source Code / Demo
Created on: March 02, 2020
Made with: HTML(Pug), CSS, SCSS
07. CSS Particles
See the Pen
CSS Particles by Paul (@paulvee)
on CodePen.
Author: Paul @paulvee
Links: Source Code / Demo
Created on: March 27, 2019
Made with: HTML, CSS, SCSS
08. Only CSS: Particles
See the Pen
Only CSS: Particles by Yusuke Nakaya (@YusukeNakaya)
on CodePen.
Author: Yusuke Nakaya @YusukeNakaya
Links: Source Code / Demo
Created on: July 19, 2017
Made with: HTML(Pug), CSS, SCSS
09. HAML and CSS Particles (Reversed)
See the Pen
Haml/Scss Particles by Riley Adrianza (@adrianzariley)
on CodePen.
Author: Riley Adrianza @adrianzariley
Links: Source Code / Demo
Created on: October 14, 2022
Made with: HTML (Haml), CSS (SCSS
10. Pure CSS Particle Animation
See the Pen
Pure CSS Particle Animation by 胡嘉仕 (@hf666)
on CodePen.
Author: 胡嘉仕 @hf666
Links: Source Code / Demo
Created on: July 23, 2019
Made with: HTML (Pug) ,CSS (SCSS)
11. Galaxy CSS Particles
See the Pen
galaxy css particles by ian gonza (@iangonza)
on CodePen.
Author: ian gonza @iangonza
Links: Source Code / Demo
Created on: May 04, 2019
Made with: HTML, CSS
12. Particles Following Camera
See the Pen
Only CSS: Particles Following Camera 1 by Yusuke Nakaya (@YusukeNakaya)
on CodePen.
Author: Yusuke Nakaya @YusukeNakaya
Links: Source Code / Demo
Created on: October 23, 2019
Made with: HTML (Pug), CSS (SCSS)
13. CSS Particles
See the Pen
CSS Particles by Paolo Duzioni (@Paolo-Duzioni)
on CodePen.
Author: Paolo Duzioni @Paolo-Duzioni
Links: Source Code / Demo
Created on: February 11, 2018
Made with: HTML(Pug) , CSS (SCSS)
14. Particles in Space
See the Pen
Particles in space by Dean Wagman (@deanwagman)
on CodePen.
Author: Dean Wagman @deanwagman
Links: Source Code / Demo
Created on: July 13, 2015
Made with: HTML, CSS, JS(Babel)
15. CSS Particles
See the Pen
CSS Particles by Alexi Taylor (@alexitaylor)
on CodePen.
Author: Alexi Taylor @alexitaylor
Links: Source Code / Demo
Created on: June 29, 2017
Made with: HTML, CSS, SCSS
16. CSS Only Particle System
See the Pen
CSS only particle system by Robin Selmer (@robinselmer)
on CodePen.
Author: Robin Selmer @robinselmer
Links: Source Code / Demo
Created on: February 07, 2017
Made with: HTML, CSS, SCSS
17. CSS Particle Animation
See the Pen
CSS Particle Animation (no JavaScript) by Takeshi Kano (@tonkotsuboy)
on CodePen.
Author: Takeshi Kano @tonkotsuboy
Links: Source Code / Demo
Created on: February 20, 2018
Made with: HTML(Pug), CSS, SCSS
18. Particle Background Animation
See the Pen
Particle background animation by PHP Hacker (@php-hacker)
on CodePen.
Author: PHP Hacker @php-hacker
Links: Source Code / Demo
Created on: December 30, 2021
Made with: HTML (Pug), CSS (Stylus), JS
19. Explosion Particle Animation
See the Pen
???? Explosion particles animation by Explosion AI (@explosion)
on CodePen.
Author: Explosion AI @explosion
Links: Source Code / Demo
Created on: October 1, 2016
Made with: HTML (Pug), CSS (Sass), JS(Babel)
20. CSS Particle Animation
See the Pen
CSS Particle Animation by Nate Wiley (@natewiley)
on CodePen.
Author: Nate Wiley @natewiley
Links: Source Code / Demo
Created on: May 10, 2014
Made with: HTML, CSS, SCSS
21. Quantum Project
See the Pen
Quantum Project x Eedi by Lorenzo Verzini (@Lov)
on CodePen.
Author: Lorenzo Verzini @Lov
Links: Source Code / Demo
Created on: June 3, 2016
Made with: HTML, CSS (Less)
22. CSS Particles
See the Pen
CSS Particles by Giana (@giana)
on CodePen.
Author: Giana @giana
Links: Source Code / Demo
Created on: August 13, 2015
Made with: HTML(Pug), CSS(SCSS)
23. Proximity Particles (No Canvas)
See the Pen
Proximity Particles (No Canvas) by Tibix (@Tibixx)
on CodePen.
Author: Tibix @Tibixx
Links: Source Code / Demo
Created on: March 20, 2018
Made with: HTML, CSS
38. Emotionality
See the Pen
emotionality by leimapapa (@leimapapa)
on CodePen.
Author: leimapapa @leimapapa
Links: Source Code / Demo
Created on: March 21, 2024
Made with: HTML, CSS
25. tsParticles black hole with orbiting particles
See the Pen
tsParticles black hole with orbiting particles by Matteo Bruni (@matteobruni)
on CodePen.
Author: Matteo Bruni @matteobruni
Links: Source Code / Demo
Created on: June 24, 2020
Made with: HTML, CSS, JS
26. Particle Background Portfolio Page
See the Pen
Particle Background Portfolio Page by vabhishek.me (@vabhishek-me)
on CodePen.
Author: vabhishek.me @vabhishek-me
Links: Source Code / Demo
Created on: April 30, 2017
Made with: HTML, CSS, JS
27. Particle Cloud
See the Pen
Particle Cloud by Will Browning (@willbrowning)
on CodePen.
Author: Will Browning @willbrowning
Links: Source Code / Demo
Created on: April 2, 2016
Made with: HTML, CSS(SCSS), JS
28. Bubbly
See the Pen
Bubbly by Alexis Munsayac (@lxsmnsyc)
on CodePen.
Author: Alexis Munsayac @lxsmnsyc
Links: Source Code / Demo
Created on: March 4, 2019
Made with: HTML(Slim), CSS(SCSS)
29. Particle background practise v2.1
See the Pen
Particle background practise v2.1 by andreas jv (@ajv)
on CodePen.
Author: ANDREAS JV @ajv
Links: Source Code / Demo
Created on: April 11, 2016
Made with: HTML, CSS(SCSS), JS
30. Symmetrical Flow Fields
See the Pen
Symmetrical Flow Fields by Jeremy Wentworth (@jeremywen)
on CodePen.
Author: Jeremy Wentworth @jeremywen
Links: Source Code / Demo
Created on: July 2, 2016
Made with: HTML, CSS
31. BVAmbient – VanillaJS Background Particles
See the Pen
BVAmbient – VanillaJS Background Particles by Bruno Vieira (@BMSVieira)
on CodePen.
Author: Bruno Vieira @BMSVieira
Links: Source Code / Demo
Created on: December 2, 2020
Made with: HTML, CSS, JS
32. Particle Background Test
See the Pen
Particle Background Test by Samurai Mac (@samurai-mac)
on CodePen.
Author: Samurai Mac @samurai-mac
Links: Source Code / Demo
Created on: November 24, 2017
Made with: HTML, CSS(Less), JS
33. Particle Swarm [Magnetic Field recreation]
See the Pen
Particle Swarm [Magnetic Field recreation] by Bas Groothedde (@ImagineProgramming)
on CodePen.
Author: Bas Groothedde @ImagineProgramming
Links: Source Code / Demo
Created on: October 19, 2015
Made with: HTML, CSS
34. Particle Background
See the Pen
particle background by Gurpreet Kaur (@kaurg)
on CodePen.
Author: Gurpreet Kaur @kaurg
Links: Source Code / Demo
Created on: October 10, 2016
Made with: HTML, CSS, JS
35. JS – Canvas
See the Pen
JS – Canvas #1 by EvonDev (@evondev)
on CodePen.
Author: EvonDev @evondev
Links: Source Code / Demo
Created on: January 7, 2018
Made with: HTML, CSS, JS
36. Canvas Hexagonal Particle Effect
See the Pen
Canvas Hexagonal Particle Effect by Karl Saunders (@Mobius1)
on CodePen.
Author: Karl Saunders @Mobius1
Links: Source Code / Demo
Created on: April 11, 2017
Made with: HTML, CSS(SCSS), JS
37. Glowing particle Background with text
See the Pen
Glowing particle Background with text by pranjal dubey (@pranjaldub1999)
on CodePen.
Author: pranjal dubey @pranjaldub1999
Links: Source Code / Demo
Created on: October 11, 2021
Made with: HTML, CSS