A collection of hand-picked HTML and CSS particle background code examples.

7 CSS Particle Backgrounds

A collection of hand-picked HTML and CSS particle background code examples.

Related Articles

  1. CSS Animated Backgrounds
  2. CSS Background Patterns
  3. CSS Fixed Backgrounds
  4. CSS Triangle Backgrounds
  5. jQuery Background Plugins

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

  • 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

  • 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: -

back to top