40+ CSS Particle Backgrounds

Curious about spicing up your website with captivating visual elements? In this collection, we are featuring 40+ HTML and CSS particle backgrounds code examples sourced from reliable platforms such as CodePen and GitHub.

We’ve carefully curated each example to provide web designers, developers, and UI/UX creatives with mesmerizing effects that add depth and interactivity to websites and web applications. As a result, it enhances user engagement in a way you’ve never seen before.

From gentle snowfall to lively confetti showers, and quantum effects to pure CSS particle animations, we have something for everyone. If you have basic knowledge of HTML, CSS, and JS, then you can customise each item to any extent. Be it size, colour, or behaviour, just align the particle background with your own unique style.

With CSS Particle Backgrounds, you can elevate your user-interface design and leave a lasting impression on your site audience! Let’s explore our inspiring collection of CSS particle background examples.

1. Vivant Logo & Particle Background

See the Pen <a href="https://codepen.io/andrewtang/pen/mwLagb"> Vivant Logo & Particle Background</a> by Andrew (<a href="https://codepen.io/andrewtang">@andrewtang</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrew
Source: Code / Demo
Created on: JULY 4, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

2. Pure CSS: Particle Background

See the Pen <a href="https://codepen.io/FlyC/pen/oLpJWJ"> Pure CSS: Particle Background</a> by FlyC (<a href="https://codepen.io/FlyC">@FlyC</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: FlyC
Source: Code / Demo
Created on: JULY 16, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

3. Only CSS: Particles

See the Pen <a href="https://codepen.io/YusukeNakaya/pen/BZgxGg"> Only CSS: Particles </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: JULY 19, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

4. CSS Particles

See the Pen <a href="https://codepen.io/alexitaylor/pen/RgxJwg"> CSS Particles</a> by Alexi Taylor (<a href="https://codepen.io/alexitaylor">@alexitaylor</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alexi Taylor
Source: Code / Demo
Created on: JUNE 29, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

5. bootstrap social login with particle background

Author: Angeal
Source: Code / Demo
Created on: AUGUST 23, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus), JavaScript(CoffeeScript)

6. CSS Particle Animation

See the Pen <a href="https://codepen.io/natewiley/pen/QWGdZJ"> CSS Particle Animation </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: MAY 10, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

7. tsParticles black hole with orbiting particles

See the Pen <a href="https://codepen.io/matteobruni/pen/oNbWrmd"> tsParticles black hole with orbiting particles</a> by Matteo Bruni (<a href="https://codepen.io/matteobruni">@matteobruni</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matteo Bruni
Source: Code / Demo
Created on: JUNE 24, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

8. Particle Cloud

See the Pen <a href="https://codepen.io/willbrowning/pen/wGryEr"> Particle Cloud</a> by Will Browning (<a href="https://codepen.io/willbrowning">@willbrowning</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Will Browning
Source: Code / Demo
Created on: APRIL 2, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

9. HAML and CSS Particles (Reversed)

See the Pen <a href="https://codepen.io/rileyadrianza/pen/gOzEOWe"> Haml/Scss Particles</a> by Riley Adrianza (<a href="https://codepen.io/rileyadrianza">@rileyadrianza</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Riley Adrianza
Source: Code / Demo
Created on: OCTOBER 14, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

10. Quantum Project

See the Pen <a href="https://codepen.io/Lov/pen/pbJEZo"> Quantum Project x Eedi</a> by Lorenzo Verzini (<a href="https://codepen.io/Lov">@Lov</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lorenzo Verzini
Source: Code / Demo
Created on: JUNE 3, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

11. Pure CSS Particle Animation

See the Pen <a href="https://codepen.io/hf666/pen/WVrpWe"> Pure CSS Particle Animation</a> by 胡嘉仕 (<a href="https://codepen.io/hf666">@hf666</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: 胡嘉仕
Source: Code / Demo
Created on: JULY 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug) ,CSS (SCSS)

12. Particle Background Portfolio Page

See the Pen <a href="https://codepen.io/vabhishek-me/pen/rmmjOJ"> Particle Background Portfolio Page</a> by vabhishek.me (<a href="https://codepen.io/vabhishek-me">@vabhishek-me</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: vabhishek.me
Source: Code / Demo
Created on: APRIL 30, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

13. Particles Background

See the Pen <a href="https://codepen.io/technovore/pen/aOdGjY"> Particles Background</a> by Nenad (<a href="https://codepen.io/technovore">@technovore</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nenad
Source: Code / Demo
Created on: MAY 11, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

14. CSS Only Particle System

See the Pen <a href="https://codepen.io/robinselmer/pen/mRjoXr"> CSS only particle system</a> by Robin Selmer (<a href="https://codepen.io/robinselmer">@robinselmer</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Robin Selmer
Source: Code / Demo
Created on: FEBRUARY 07, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

15. CSS Particles

See the Pen <a href="https://codepen.io/giana/pen/ZGZeWR"> CSS Particles</a> by Giana (<a href="https://codepen.io/giana">@giana</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Giana
Source: Code / Demo
Created on: AUGUST 13, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

16. Symmetrical Flow Fields

See the Pen <a href="https://codepen.io/jeremywen/pen/vKmQqg"> Symmetrical Flow Fields</a> by Jeremy Wentworth (<a href="https://codepen.io/jeremywen">@jeremywen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jeremy Wentworth
Source: Code / Demo
Created on: JULY 2, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. Bubbly

See the Pen <a href="https://codepen.io/lxsmnsyc/pen/WmxjWy"> Bubbly</a> by Alexis Munsayac (<a href="https://codepen.io/lxsmnsyc">@lxsmnsyc</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alexis Munsayac
Source: Code / Demo
Created on: MARCH 4, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Slim), CSS(SCSS)

18. How To Create An Animated Particle Background Using CSS And JavaScript

See the Pen <a href="https://codepen.io/tutsplus/pen/MrjYJK"> How to create an animated particle background using CSS and JavaScript – the CSS-only approach</a> by Envato Tuts+ (<a href="https://codepen.io/tutsplus">@tutsplus</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Envato Tuts+
Source: Code / Demo
Created on: DECEMBER 21, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

19. Proximity Particles (No Canvas)

See the Pen <a href="https://codepen.io/Tibixx/pen/mxRPNQ"> Proximity Particles (No Canvas)</a> by Tibix (<a href="https://codepen.io/Tibixx">@Tibixx</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tibix
Source: Code / Demo
Created on: MARCH 20, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Galaxy CSS Particles

See the Pen <a href="https://codepen.io/iangonza/pen/PvYvLv"> galaxy css particles</a> by ian gonza (<a href="https://codepen.io/iangonza">@iangonza</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ian gonza
Source: Code / Demo
Created on: MAY 04, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. Particle background practise v2.1

See the Pen <a href="https://codepen.io/ajv/pen/vGdgox"> Particle background practise v2.1</a> by andreas jv (<a href="https://codepen.io/ajv">@ajv</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ANDREAS JV
Source: Code / Demo
Created on: APRIL 11, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

22. CSS Particle Animation

See the Pen <a href="https://codepen.io/tonkotsuboy/pen/xaMVpo"> CSS Particle Animation (no JavaScript)</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: FEBRUARY 20, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

23. Random Particles Animation

See the Pen <a href="https://codepen.io/remid/pen/OgYjYV"> SASS only – Random particles animation</a> by Rémi Denimal (<a href="https://codepen.io/remid">@remid</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rémi Denimal
Source: Code / Demo
Created on: JULY 18, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(Sass)

24. Emotionality

See the Pen <a href="https://codepen.io/leimapapa/pen/jORBGYe"> emotionality</a> by leimapapa (<a href="https://codepen.io/leimapapa">@leimapapa</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: leimapapa
Source: Code / Demo
Created on: MARCH 21, 2024
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

25. BVAmbient – VanillaJS Background Particles

See the Pen <a href="https://codepen.io/BMSVieira/pen/OJRyJjq"> BVAmbient – VanillaJS Background Particles</a> by Bruno Vieira (<a href="https://codepen.io/BMSVieira">@BMSVieira</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bruno Vieira
Source: Code / Demo
Created on: DECEMBER 2, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

26. CSS Particles

See the Pen <a href="https://codepen.io/paulvee/pen/NJVgPx"> CSS Particles</a> by Paul (<a href="https://codepen.io/paulvee">@paulvee</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Paul
Source: Code / Demo
Created on: MARCH 27, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

27. Particle Background Test

See the Pen <a href="https://codepen.io/samurai-mac/pen/ooybOR"> Particle Background Test</a> by Samurai Mac (<a href="https://codepen.io/samurai-mac">@samurai-mac</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Samurai Mac
Source: Code / Demo
Created on: NOVEMBER 24, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript

28. Particles Following Camera

See the Pen <a href="https://codepen.io/YusukeNakaya/pen/OJJpQyL"> Only CSS: Particles Following Camera 1</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: OCTOBER 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: (Pug), CSS (SCSS)

29. CSS Particle

See the Pen <a href="https://codepen.io/rauldronca/pen/LgXPgJ"> CSS Particles </a> by Dronca Raul (<a href="https://codepen.io/rauldronca">@rauldronca</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dronca Raul
Source: Code / Demo
Created on: OCTOBER 24, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

30. Particle Background Animation

See the Pen <a href="https://codepen.io/php-hacker/pen/jOGZdWx"> Particle background animation</a> by PHP Hacker (<a href="https://codepen.io/php-hacker">@php-hacker</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: PHP Hacker
Source: Code / Demo
Created on: DECEMBER 30, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Pug), CSS (Stylus), JavaScript

31. CSS Particles

See the Pen <a href="https://codepen.io/Paolo-Duzioni/pen/MQmbJo"> CSS Particles</a> by Paolo Duzioni (<a href="https://codepen.io/Paolo-Duzioni">@Paolo-Duzioni</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Paolo Duzioni
Source: Code / Demo
Created on: FEBRUARY 11, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

32. Particle Swarm [Magnetic Field recreation]

See the Pen <a href="https://codepen.io/ImagineProgramming/pen/LpOJzM"> Particle Swarm [Magnetic Field recreation]</a> by Bas Groothedde (<a href="https://codepen.io/ImagineProgramming">@ImagineProgramming</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bas Groothedde
Source: Code / Demo
Created on: OCTOBER 19, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

33. CSS Particles Animation

See the Pen <a href="https://codepen.io/noeldevelops/pen/VwLWOEM"> css particles animation</a> by Noel C (<a href="https://codepen.io/noeldevelops">@noeldevelops</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Noel C
Source: Code / Demo
Created on: MARCH 02, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

34. Particle Background

See the Pen <a href="https://codepen.io/kaurg/pen/jMzxxZ"> particle background</a> by Gurpreet Kaur (<a href="https://codepen.io/kaurg">@kaurg</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gurpreet Kaur
Source: Code / Demo
Created on: OCTOBER 10, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

35. Particles in Space

See the Pen <a href="https://codepen.io/deanwagman/pen/EjLBdQ"> Particles in space</a> by Dean Wagman (<a href="https://codepen.io/deanwagman">@deanwagman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dean Wagman
Source: Code / Demo
Created on: JULY 13, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript(Babel)

36. JS – Canvas

See the Pen <a href="https://codepen.io/evondev/pen/mpqQXq"> JS – Canvas #1</a> by EvonDev (<a href="https://codepen.io/evondev">@evondev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: EvonDev
Source: Code / Demo
Created on: JANUARY 7, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

37. Explosion Particle Animation

See the Pen <a href="https://codepen.io/explosion/pen/zKEovE"> 💥 Explosion particles animation</a> by Explosion AI (<a href="https://codepen.io/explosion">@explosion</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Explosion AI
Source: Code / Demo
Created on: OCTOBER 1, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML (Pug), CSS (Sass), JavaScript(Babel)

38. CSS Particle Style Animation.

See the Pen <a href="https://codepen.io/Johnm__/pen/qZqgGJ"> CSS particle style animation. </a> by John (<a href="https://codepen.io/Johnm__">@Johnm__</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: John
Source: Code / Demo
Created on: MARCH 16, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

39. Canvas Hexagonal Particle Effect

See the Pen <a href="https://codepen.io/Mobius1/pen/pPzLBX"> Canvas Hexagonal Particle Effect</a> by Karl Saunders (<a href="https://codepen.io/Mobius1">@Mobius1</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Karl Saunders
Source: Code / Demo
Created on: APRIL 11, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

40. Glowing particle Background with text

See the Pen <a href="https://codepen.io/pranjaldub1999/pen/ZEJYQBd"> Glowing particle Background with text</a> by pranjal dubey (<a href="https://codepen.io/pranjaldub1999">@pranjaldub1999</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: pranjal dubey
Source: Code / Demo
Created on: OCTOBER 11, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

41. Grayscale Ambient Background

See the Pen <a href="https://codepen.io/jencrosby/pen/NWxZOyX"> Grayscale Ambient Background</a> by jen (<a href="https://codepen.io/jencrosby">@jencrosby</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: jen
Source: Code / Demo
Created on: JULY 30, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS