7 CSS Particle Backgrounds
A collection of hand-picked HTML and CSS particle background code examples.
Related Articles
- CSS Animated Backgrounds
- CSS Background Patterns
- CSS Fixed Backgrounds
- CSS Triangle Backgrounds
- jQuery Background Plugins
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: -
Made with
- HTML (Pug) / CSS (SCSS)
About the code
CSS Particles Background
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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: -
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: -
Made with
- HTML / CSS (SCSS)
About the code
CSS Particles
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Pure CSS Particles
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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: -