A repository of over 1000 quality jQuery plugins

jQuery jQuery Particles

jQuery Particles is a jQuery Animation & Effects plugin.

Created by maaarc

A lightweight (~2kb) and easy-to-use jQuery plugin for particle backgrounds.

Not what you're looking for? Click here to view more Animation & Effects jQuery plugins


Build Status dependencies Status devDependencies Status MIT Licence

particles.js is a lightweight (~2kb) and dependency-free javascript plugin for particle backgrounds.



There are several ways to install particles.js:

  • Download the latest version
  • Install with npm: npm install particlesjs --save
  • Use the CDN: https://npmcdn.com/particlesjs@1.0.2/dist/particles.min.js


Include the minified JS in your HTML file.

<script src="path/to/particles.min.js"></script>

Create a canvas element in your body tag.

<canvas id="myCanvas"></canvas>

Add a few styles to your css.

body {
  margin: 0;

#myCanvas {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;

Initialize the plugin on the window.onload event.

window.onload = function() {
  Particles.init({ options });

// e.g.
window.onload = function() {
    selector: '#myCanvas',
    color: '#0f9976'


selector-Required: The CSS selector of your canvas element
maxParticles100Optional: Maximum amount of particles
sizeVariations3Optional: Amount of size variations
speed0.5Optional: Movement speed of the particles
color#000000Optional: Color of particles and connecting lines
minDistance120Optional: Distance in px for conntecting lines
connectParticlesfalseOptional: true/false if connecting lines should be drawn

Browser Support

IE9+ and all modern browsers.


To compile the distribution files by yourself, make sure that you have node.js and gulp installed, then:

  • Clone the repository: https://github.com/marcbruederlin/particles.js.git
  • Change in the project directory: cd particles.js
  • Install the dependencies: npm install
  • Run the gulp build task gulp build to regenerate the dist folder.
    You can also run gulp build --watch to watch for file changes and automatically rebuild the files.

Using particles.js?

If you’re using particles.js in some interesting way or on a cool site, I’d be very grateful if you shoot me a link to it.
For any problems or questions don't hesitate to open an issue.
Do you like particles.js? If you want, you can buy me a coffee.


particles.js is created by Marc Brüderlin and released under the MIT license.

You might also like these other Animation & Effects jQuery Plugins


Preview Download Github Page

Copyright © 2016 Marc Brüderlin