FreeToolsForWeb
HelpBuy me a coffee

particles.js Playground — Live Config Editor and Generator

Edit a particles.js config with controls or raw JSON, watch it run live, and copy the JSON or a ready-to-paste HTML snippet.

Found a problem, or something that could be better? We read every message and we fix things quickly.

This particles.js playground is a live editor and generator for particles.js configs. Change the number of particles, their colours and shapes, the linked lines, the movement and the hover and click effects with the controls, or edit the full JSON config directly, and the preview re-runs as you type. Both views edit the same config, so you can rough it out with sliders and fine-tune it in JSON. When it looks right, copy the JSON or a complete HTML snippet with the script tag and the particlesJS() call.

The preview runs the real particles.js 2.0.0 library, not an imitation, so what you see is what your page will show, including its quirks: only hex colours are accepted, the number of particles scales with the canvas size when density is on, and linked lines get expensive quickly. The FPS readout helps you judge a config before shipping it to phones. particles.js itself has not been updated since 2.0.0 in 2015; it still works in current browsers, and the notes below explain when tsParticles, its maintained successor, is the better choice.

How to use

  1. Pick a preset to start from, or paste your own config into the JSON editor (a particlesjs-config.json, a particlesJS("particles-js", {...}) call or a plain object all work). You can also drop a .json file onto the tool.
  2. Adjust the config with the Controls tab: particle number and density, colours, shape, opacity, size, linked lines, movement and interactivity. Or edit the JSON directly; errors show under the editor and the preview keeps the last valid config.
  3. Set the preview background colour or image to match your page, and hover and click the preview to test the interactivity. Use Expand or Fullscreen to see it at full size, and watch the FPS readout.
  4. Choose an output: the HTML snippet, the particlesJS.load variant, a React component or the JSON config. Choose whether the container is a full-page background or fills a parent element.
  5. Copy it or download it, and paste the HTML snippet just before the closing </body> tag of your page.

Frequently asked questions

How do I add particles.js to my website?

Add an empty element with an id, such as <div id="particles-js"></div>, give it a size with CSS, load the library with a script tag (jsDelivr serves it at cdn.jsdelivr.net/npm/ followed by particles.js@2.0.0/particles.min.js), and call particlesJS("particles-js", { ...config }) with that id and your config. The script has to run after the element exists, so put it just before </body>. The most common reason for a blank result is a container with no height: particles.js sizes its canvas from the element, so a div with height 0 gives a canvas with height 0. The HTML snippet from this tool includes the CSS for a full-page background or for filling a parent element.

How do I use particles.js in React or Next.js?

Install it with npm install particles.js, then import it inside useEffect so it only runs in the browser (it uses window, so importing it at the top level breaks server-side rendering in Next.js). Call window.particlesJS("particles-js", config) once the element has rendered, and clean up when the component unmounts: call pJS.fn.vendors.destroypJS() on each entry of window.pJSDom and reset window.pJSDom to an empty array, or the animation loop keeps running and the next mount fails. The React / Next.js output here is a component that does this. For a new React project, the maintained @tsparticles/react package is the more natural fit.

Is particles.js still maintained? particles.js vs tsParticles

No. particles.js by Vincent Garreau stopped at version 2.0.0, released in 2015, and its repository has had no releases since. It still works in current browsers because it uses only canvas and requestAnimationFrame, and many sites use it. tsParticles, by Matteo Bruni, started as a TypeScript port and is its actively maintained successor: it has more shapes and effects, official React, Vue, Angular and Svelte components, better performance options, and it can read most particles.js options. Use particles.js for a quick, dependency-free background on a static page; choose tsParticles for a framework app or anything you will maintain for years.

Does particles.js slow down a website on mobile?

It can. Every particle is redrawn on every frame, and with linked lines enabled each particle is distance-checked against every other, so the cost grows with the square of the particle count. retina_detect doubles or triples the pixels drawn on high-DPI phones. To keep it smooth: keep density on so small screens get fewer particles, stay under about 100 particles when lines are on, turn off lines or retina_detect if the FPS drops, and skip initialising particles.js when the visitor has prefers-reduced-motion set. Browsers pause requestAnimationFrame in background tabs, so it costs nothing when the tab is hidden.

Why is my particles.js background not showing?

Check these in order: the container has a real height (height: 100% only works if its parent has a height too, which is why the snippet uses position: fixed or absolute); the particlesJS call runs after the element exists; the particle colour differs from the background; other content is not covering it with an opaque background; and the browser console shows no error. With particlesJS.load, the page must be served over http(s), since loading the JSON file from file:// is blocked. A colour written as a name or rgb() instead of hex also stops particles.js from drawing; this tool flags that.

Can particles.js use an image or a custom shape?

Yes. Set shape.type to "image" and shape.image.src to the image URL; width and height set its aspect ratio, and the size option sets how big it is drawn. PNG, JPG, GIF and WebP load as ordinary images. SVG files are downloaded with XMLHttpRequest so their colour can be replaced, which means the server hosting the SVG must allow cross-origin requests. Besides images, the built-in shapes are circle, edge (a square), triangle, polygon and star, with polygon.nb_sides setting the number of sides or star points. An array of shapes gives each particle a random one.

particles.js config reference: the options that matter

A particles.js config has three top-level keys: particles (what is drawn and how it moves), interactivity (how it reacts to the mouse) and retina_detect. Any key you leave out falls back to the library default, and those defaults are heavy: 400 particles of radius 20 with lines on. So a config that sets only a colour does not look like the demo.

• particles.number.value and density: with density.enable on, value is the count for an area of value_area × 1000 square pixels, and the real count scales with the canvas. 80 particles at value_area 800 gives about 200 on a 1920×1080 screen and a few dozen on a phone.

• particles.color.value: a hex string, an array of hex strings (each particle picks one), "random", or an {r, g, b} object. Named colours and rgb() strings are not supported and stop the animation.

• particles.shape.type: circle, edge, triangle, polygon, star or image, or an array of them. stroke adds an outline; polygon.nb_sides sets sides for polygon and points for star.

• opacity and size: value is the maximum, random picks a value between 0 and it per particle, and anim makes it pulse between opacity_min / size_min and the value at the given speed.

• line_linked: lines between particles closer than distance pixels, fading with distance. Its color must be a single hex value.

• move: speed, direction (none or one of eight directions), random (varied speeds), straight (no drift), out_mode (out wraps to the other side, bounce reflects off the edges), bounce (particles collide with each other) and attract.

• interactivity.events: onhover modes grab (draw lines to the cursor), bubble (grow or fade near it) and repulse (push away); onclick modes push (add particles), remove, bubble and repulse. Their strength is set in interactivity.modes. detect_on is canvas by default; window makes it react even when content covers the canvas, using viewport coordinates.

Installing particles.js: CDN, npm or self-hosted

From a CDN: a script tag whose src is cdn.jsdelivr.net/npm/ followed by particles.js@2.0.0/particles.min.js (the HTML snippet above has the full tag). Pin the version like that rather than using @latest. The npm package contains only the unminified particles.js; jsDelivr generates the .min.js file (about 23 KB) on request, and because it is generated, jsDelivr advises against adding an SRI integrity hash to it.

With npm: npm install particles.js@2.0.0, then import "particles.js" in client-side code. The package exports nothing; importing it defines window.particlesJS and window.pJSDom. It ships no TypeScript types, so TypeScript projects need a one-line declare module "particles.js" and should call it through window.

Self-hosted: copy particles.js from the npm package (or the minified file from jsDelivr) into your static files and point the script tag at it. The library uses no eval, so it works under a strict Content-Security-Policy that allows your own scripts; an image shape needs its host in img-src, and SVG images or particlesJS.load also need the host in connect-src.

particles.js is MIT licensed, so you can use it in commercial projects as long as the licence notice stays in the file.

Making a particle background fast and accessible

A moving background is decoration, so it should never get in the way. Respect reduced motion by starting it only when the visitor has not asked for less: if (!matchMedia("(prefers-reduced-motion: reduce)").matches) particlesJS("particles-js", config). Alternatively keep it but set move.enable to false, which draws one still frame.

Keep text readable: check the text colour against the background and against the particle and line colours, and add a semi-transparent overlay under the text if needed. Put content above the canvas with position: relative and a higher z-index, and if the canvas must not catch clicks, give it pointer-events: none and use detect_on: "window" for hover effects.

Test on a real phone. The FPS readout in this playground measures your computer, and a mid-range phone can manage a third of that. Lowering the particle count, raising value_area, turning off retina_detect and disabling linked lines are, in that order, the changes that help most.

Related free tools

  • CSS Gradient Generator — Build linear, radial and conic gradients with draggable colour stops, an angle dial and presets. Copy the CSS or a Tailwind class.
  • Box Shadow Generator — Design layered box-shadow and text-shadow effects with live preview, presets for elevation, neumorphism and glow, and copy the CSS.
  • JSON Formatter — Pretty-print, minify and validate JSON, with parse errors located by line and column. In your browser, no upload.
  • Color Palette Generator — Press the spacebar for a new palette, lock the colours you like, pick a harmony, or pull the palette out of a photo. Export to CSS, Tailwind, SCSS, JSON or PNG.
  • SVG Editor — Draw shapes, arrows, freehand lines and text on a canvas, then download a clean SVG or PNG. Free, in your browser, no signup.