15+ CSS Particle Backgrounds – Free Code + Demos – csshint

Latest Collection of 100% free CSS Particle Backgrounds examples. All items are 100% free and open-source.

CSS Particles

Author

rx0079

Made with

HTML (Pug), CSS(SCSS)

See the Pen <a href="https://codepen.io/tutsplus/pen/MrjYJK"> How to create an animated particle background using CSS and JavaScript – the CSS-only approach</a> by Envato Tuts+ (<a href="https://codepen.io/tutsplus">@tutsplus</a>) on <a href="https://codepen.io">CodePen</a>.

animated particle background using CSS and JavaScript

Author

Envato Tuts+

Made with

HTML, SCSS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/alexitaylor/pen/RgxJwg"> CSS Particles</a> by Alexi Taylor (<a href="https://codepen.io/alexitaylor">@alexitaylor</a>) on <a href="https://codepen.io">CodePen</a>.

CSS Particles

Author

Alexi Taylor

Made with

HTML, SCSS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/remid/pen/OgYjYV"> SASS only – Random particles animation</a> by Rémi Denimal (<a href="https://codepen.io/remid">@remid</a>) on <a href="https://codepen.io">CodePen</a>.

SASS only – Random particles animation

Author

Rémi Denimal

Made with

Haml, Sass, JS

Demo / Code Get Hosting

PARTICLE BACKGROUND

Author

webcoderskull

Made with

HTML, CSS, JS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/robinselmer/pen/mRjoXr"> CSS only particle system</a> by Robin Selmer (<a href="https://codepen.io/robinselmer">@robinselmer</a>) on <a href="https://codepen.io">CodePen</a>.

CSS only particle system

Author

Robin Selmer

Made with

HTML, SCSS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/n-sayenko/pen/qOXKVr"> particles.js snow</a> by Nat (<a href="https://codepen.io/n-sayenko">@n-sayenko</a>) on <a href="https://codepen.io">CodePen</a>.

particles.js snow

Author

Made with

HTML, CSS, JS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/ImagineProgramming/pen/LpOJzM"> Particle Swarm [Magnetic Field recreation]</a> by Bas Groothedde (<a href="https://codepen.io/ImagineProgramming">@ImagineProgramming</a>) on <a href="https://codepen.io">CodePen</a>.

Particle Swarm [Magnetic Field recreation]

Author

Bas Groothedde

Made with

HTML, SCSS, JS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/sschepis/pen/ErFen"> Particle Galaxy</a> by Sebastian Schepis (<a href="https://codepen.io/sschepis">@sschepis</a>) on <a href="https://codepen.io">CodePen</a>.

Particle Galaxy

Author

Sebastian Schepis

Made with

HTML, SCSS, JS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/prayushS/pen/xpFiH"> Vibrating Particles</a> by Prayush S (<a href="https://codepen.io/prayushS">@prayushS</a>) on <a href="https://codepen.io">CodePen</a>.

Vibrating Particles

Author

Prayush S

Made with

HTML, CSS, JS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/matteobruni/pen/YzwBmJZ"> tsParticles mouse trail unveiling background</a> by Matteo Bruni (<a href="https://codepen.io/matteobruni">@matteobruni</a>) on <a href="https://codepen.io">CodePen</a>.

Vibrating Particles

Author

Matteo Bruni

Made with

HTML, CSS, JS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/matteobruni/pen/oNbWrmd"> tsParticles black hole with orbiting particles</a> by Matteo Bruni (<a href="https://codepen.io/matteobruni">@matteobruni</a>) on <a href="https://codepen.io">CodePen</a>.

tsParticles black hole with orbiting particles

Author

Matteo Bruni

Made with

HTML, CSS, JS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/natewiley/pen/GgONKy"> Particle Orb CSS</a> by Nate Wiley (<a href="https://codepen.io/natewiley">@natewiley</a>) on <a href="https://codepen.io">CodePen</a>.

Particle Orb CSS

Author

Nate Wiley

Made with

Haml, SCSS, JS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/hf666/pen/WVrpWe"> Pure CSS Particle Animation</a> by 胡嘉仕 (<a href="https://codepen.io/hf666">@hf666</a>) on <a href="https://codepen.io">CodePen</a>.

Pure CSS Particle Animation

Author

胡嘉仕

Made with

Pug, SCSS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/Johnm__/pen/qZqgGJ"> CSS particle style animation. </a> by John (<a href="https://codepen.io/Johnm__">@Johnm__</a>) on <a href="https://codepen.io">CodePen</a>.

CSS particle style animation.

Author

John

Made with

Haml, SCSS

Demo / Code Get Hosting

CSS Particles

Author

Made with

animated particle background using CSS and JavaScript

Author

Made with

CSS Particles

Author

Made with

SASS only – Random particles animation

Author

Made with

PARTICLE BACKGROUND

Author

Made with

CSS only particle system

Author

Made with

particles.js snow

Author

Made with

Particle Swarm [Magnetic Field recreation]

Author

Made with

Particle Galaxy

Author

Made with

Vibrating Particles

Author

Made with

Vibrating Particles

Author

Made with

tsParticles black hole with orbiting particles

Author

Made with

Particle Orb CSS

Author

Made with

Pure CSS Particle Animation

Author

Made with

CSS particle style animation.

Author

Made with

You may also like