20+ CSS Particle Backgrounds - Free Code + Demos
Collection of 20+ CSS Particle Backgrounds. All items are 100% free and open-source.
1. 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.
Author: Takeshi Kano (tonkotsuboy)
Links: Source Code / Demo
Created on: September 21, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, particle, animation
2. CSS Particles
Inspired by Bits. Be warned: terrible performance. Click and hold for even worse performance.
Author: rx0079 (re0079)
Links: Source Code / Demo
Created on: July 2, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, sass, particles, blend-modes
3. How To Create An Animated Particle Background Using CSS And JavaScript - The CSS-only Approach
Author: Envato Tuts+ (tutsplus)
Links: Source Code / Demo
Created on: December 21, 2017
Made with: HTML, SCSS
4. SASS Only - Random Particles Animation
Loop with sass & compass of random circle particles
Author: Rémi Denimal (remid)
Links: Source Code / Demo
Created on: July 18, 2017
Made with: Haml, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: sass, particle, random, scss, animation
5. CSS Particles
Author: Alexi Taylor (alexitaylor)
Links: Source Code / Demo
Created on: June 28, 2017
Made with: HTML, SCSS
6. CSS Particle Style Animation.
Playing around with an effect to include on the product page of Outfit.io
Author: John (Johnm__)
Links: Source Code / Demo
Created on: March 15, 2016
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css, animation, rotate, transform, translate
7. PARTICLE BACKGROUND
Links: Source Code / Demo
Made with: HTML, CSS, JS
Tags: 4.0.0, background
8. TsParticles Water Fountain
Author: Matteo Bruni (matteobruni)
Links: Source Code / Demo
Created on: August 24, 2020
Made with: HTML, CSS, JS
Tags: tsparticles, particles, javascript, fountain, animation
9. CSS Only Particle System
Customizable particle system using a randomized box-shadow property on four different layers
Author: Robin Selmer (robinselmer)
Links: Source Code / Demo
Created on: February 7, 2017
Made with: HTML, SCSS
Tags: cssonly, particle, particles, box-shadow
10. Particles.js Snow
playing around with particles.js
Author: Nat (n-sayenko)
Links: Source Code / Demo
Created on: October 12, 2015
Made with: HTML, CSS, JS
11. Particle Swarm [Magnetic Field Recreation]
Click and drag to attract, right-click to repulse, middle-mouse-click to create a time-dilation field. Check out the options for colors and particle count (lower count might improve performance on FF). Inspired by thepheer's magnetic field pen. I wanted to recreate this pen completely by ...Read More
Author: Bas Groothedde (ImagineProgramming)
Links: Source Code / Demo
Created on: October 18, 2015
Made with: HTML, SCSS, JS
Tags: simplex noise, perlin-noise, vector-math, swarm, particles
12. Particle Galaxy
An endless stream of particles pop in and out of existence as they are irresistibly drawn to the black hole in the middle - and to each other. This pen is part of my current exploration of particle systems and gravity. I plan to recreate this design in three dimensions using three.js next...Read More
Author: Sebastian Schepis (sschepis)
Links: Source Code / Demo
Created on: June 25, 2014
Made with: HTML, SCSS, JS
Tags: particle, gravity, animation, canvas, simulation
13. Particle Orb CSS
Author: Nate Wiley (natewiley)
Links: Source Code / Demo
Created on: February 6, 2015
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: sass, css3, css, css-animation, no-js
14. Vibrating Particles
Awesome and colorful vibrating particles all rendered through the canvas. Mouse over them to see the effect!
Author: Prayush S (prayushS)
Links: Source Code / Demo
Created on: June 28, 2013
Made with: HTML, CSS, JS
Tags: particles, prayush, vibrating, vibrating-particles, canvas
15. TsParticles Mouse Trail Unveiling Background
Author: Matteo Bruni (matteobruni)
Links: Source Code / Demo
Created on: July 23, 2020
Made with: HTML, CSS, JS
Tags: javascript, mouse, trail, particles, tsparticles
16. TsParticles Black Hole With Orbiting Particles
Author: Matteo Bruni (matteobruni)
Links: Source Code / Demo
Created on: June 24, 2020
Made with: HTML, CSS, JS
Tags: particles, black-hole, space, javascript, animations
More Awesome Lists:
Share: