35+ CSS Particle Backgrounds

Last Updated on by in CSS Examples
CSS Particle Background

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

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.