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
Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
HTML/CSS Particles (Reversed)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
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: -
Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
CSS Particles
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
CSS Particle Animation (No JavaScript)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
CSS Particles
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: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Pure CSS Particles
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (Less)
About a code
Quantum Project x Eedi
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
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: -
Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
Particle Orb CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -