A collection of hand-picked HTML and CSS particle background code examples from Codepen, Github and other resources. Update of September 2019 collection. 7 new items.

Related Articles

  1. CSS Animated Backgrounds

Author

  • Riley Adrianza

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

HTML/CSS Particles (Reversed)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Noel C

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS Particles Animation

Pure CSS knock-off of particles.js library. Uses CSS generated circles, but could use SVGs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • 胡嘉仕

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Pure CSS Particle Animation

CSS particle animation without JavaScript. The most important point is random movement of particles. The vignetting was created by mask-image property.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • rx0079

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS Particles Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Dronca Raul

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

CSS Particles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Takeshi Kano

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS Particle Animation (No JavaScript)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Paolo Duzioni

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS Particles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Envato Tuts+

Made with

  • HTML / CSS (SCSS)

About the code

Animated Particle Background

An animated particle background in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Rémi Denimal

Made with

  • HTML (Haml) / CSS (Sass)

About the code

Random Particles Animation

Loop with Sass & Compass of random circle particles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Alexi Taylor

Made with

  • HTML / CSS (SCSS)

About the code

CSS Particles

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • leoman

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Pure CSS Particles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Lorenzo Verzini

Made with

  • HTML / CSS (Less)

About a code

Quantum Project x Eedi

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • John

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

CSS Particle Style Animation

Playing around with an effect to include on the product page of Outfit.io

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Nate Wiley

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Particle Orb CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -