Free Elementor Particles Background (particles.js)
Particles is a free Master Addons extension that runs a particles.js animation behind any Elementor section, column or container. Turn it on and you get the default effect right away: white dots drifting across the section, joined by thin lines and pushed away by the cursor. For anything else, like falling snow, rising bubbles or a star field, build a config in the particles.js generator and paste its JSON into the panel.
A moving background without a video file
The particles are drawn on a canvas by the particles.js script, so there is no video or image to download. The Z-index setting decides where the particle layer sits, so you can keep it behind your headings and buttons. If you use particles on more than one section, keep the particle counts modest and check the page on a phone.
- No video or image files: the animation is drawn in the browser.
- A Z-index setting to keep the particle layer behind your content.
- Works on sections, columns and containers, each with its own config.
Any particles.js effect from one JSON field
The Particle JSON field controls everything particles.js can do: particle count, color, shape, size, opacity, linking lines, speed and direction, plus hover and click interactions. The link above the field opens the particles.js generator. Pick a preset such as NASA, Bubble or Snow, adjust it with sliders and download the config. Paste it in and the section updates in the editor.
- Presets on the generator: Default, NASA, Bubble, Snow and Nyan Cat.
- Shapes: circle, edge, triangle, polygon, star or your own image.
- Hover and click modes such as repulse, grab, bubble and push.
How to add a particles background in Elementor
The default white particles need a dark or colorful background to show up, so set that first.
- Turn on Particles in the Extensions tab of the Master Addons dashboard.
- Select a section, column or container and give it a dark background color.
- Open the Style tab, expand Particles and switch on Enable Particle Background.
- For a different effect, click the link above Particle JSON, pick a preset in the generator, download the JSON and paste it into the field.
- Set Z-index so the particle layer stays behind your content, then publish.
Our particles background tutorial walks through each step with screenshots.
Particles.js in WordPress: by hand or with the extension
particles.js is a free JavaScript library, and you can add it to WordPress yourself. Here is what that takes compared with the extension.
| Adding particles.js by hand | Particles extension | |
|---|---|---|
| Loading the script | Enqueue the library in your theme | Loaded only on pages with a particle section |
| Particle layer | Add a div and position it behind the content with CSS | Added to the section for you |
| Configuration | Call particlesJS() with your JSON in a script | Paste the JSON into the panel |
| Preview | On the front end | Right in the Elementor editor |
| Layering | Write your own z-index rules | Z-index field |
Particles pairs well with Glassmorphism cards on top. For other moving backgrounds, try Background Slider or Animated Gradient Background (Pro).
Frequently Asked Questions For Particles
I'm not a developer. Is the JSON stuff too hard for me?
No. Turning the effect on gives you the default look with no JSON at all. For other looks, the particles.js generator works with sliders and color pickers. Download the config it creates and paste it into the Particle JSON field.
Can I use my own image (like a logo) as a particle?
Yes. In the particles.js generator, set the shape type to image and enter the URL of your image, such as a small logo. Download the config and paste it into the Particle JSON field.
Will this work on mobile phones?
Yes, the animation runs on phones and tablets. A high particle count can slow down older phones, so keep the number modest for sections that mobile visitors will see.
Can I have different particle effects on different sections of the same page?
Yes. Each section, column and container has its own Particle JSON field, so your hero can show a star field while another section uses snow.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
![Master Addons Post/Page Duplicator extension for Elementor: MA Duplicator row link in the WordPress Pages list creating a Landing Page - [Duplicated #128] draft](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
