40+ CSS Particle Backgrounds

A hand-picked collection of 40+ HTML and CSS particle backgrounds. All items are 100% free, and customizable.

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