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, dependency-free and responsive 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@2.0.0/dist/particles.min.js


Include the minified JS in your HTML (right before the closing body tag).

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

Add a canvas element to your markup (it should be the last element)

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

Add a few styles to your css.

body {
  margin: 0;
  padding: 0;

.background {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;

Initialize the plugin on the window.onload event.

window.onload = function() {
    selector: '.background'


Option Type Default Description
selector string - Required: The CSS selector of your canvas element
maxParticles integer 100 Optional: Maximum amount of particles
sizeVariations integer 3 Optional: Amount of size variations
speed integer 0.5 Optional: Movement speed of the particles
color string #000000 Optional: Color of particles and connecting lines
minDistance integer 120 Optional: Distance in px for conntecting lines
connectParticles boolean false Optional: true/false if connecting lines should be drawn
responsive array null Optional: Array of objects containing breakpoints and options

Example how to use the responsive option.

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.


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

Version 1.x

The source code for particles.js 1.x has been moved to the v1 branch.

You might also like these other Animation & Effects jQuery Plugins


Copyright © 2016 Marc Brüderlin