Particles backgrounds add animated, floating shapes to your Elementor sections that move, connect, and react to mouse movement. They turn static sections into eye-catching, interactive areas that grab attention instantly.
In this guide, you’ll learn how to add an Elementor particles background to any section on your website using Master Addons for Elementor. We’ll cover the basic setup, built-in presets (NASA, Bubble, Snow), and how to create your own custom particle effects using particles.js JSON configuration.
No coding required. The whole process takes about 5 minutes.
What Is a Particles Background?
A particles background is an animated effect that displays small shapes (dots, circles, stars, or custom shapes) floating across a section. These particles move at different speeds, connect with thin lines when close to each other, and can react to your cursor on hover.
The effect is powered by particles.js, a popular JavaScript library. Master Addons integrates particles.js directly into Elementor, so you can enable and customize the effect without touching any code.
Master Addons includes four built-in particle presets:
| Preset | Effect | Best For |
|---|---|---|
| Default | Connected dots floating in random directions | Tech websites, SaaS landing pages |
| NASA | Space-like floating particles with depth effect | Dark hero sections, space-themed pages |
| Bubble | Larger, circular bubbles rising upward | Creative portfolios, playful designs |
| Snow | Small white particles falling like snowflakes | Seasonal pages, winter-themed sections |
You can also create fully custom effects by generating your own particles.js JSON configuration.
What You’ll Need
- WordPress with Elementor (free or Pro) installed
- Master Addons for Elementor installed and activated
- The Particles extension enabled in Master Addons settings
Make sure the Particles extension is turned on: go to Master Addons → Extensions in your WordPress dashboard and toggle Particles to ON.
How to Add Particles Background in Elementor: Step-by-Step
Follow these steps to add a particles background to any Elementor section or container on your page.
Step 1: Create or Select a Section
Open your page in the Elementor editor. Create a new section or select an existing one where you want to add the particle effect.
Choose your preferred column structure. The particles effect works with any layout, whether it’s a single column, two columns, or more.
Step 2: Add Content to the Section
Your section needs at least one widget inside it to be visible in the preview. If you’re creating a standalone particles section (like an animated hero area), drop a Spacer widget into the section and set the height to 400-600px.
You can also add headings, buttons, images, or any other widgets. The particles will appear behind all your content.
Step 3: Set the Section to Full Width (Optional)
For the best visual impact, set the section layout to Full Width. This makes the particles span the entire browser width.
Click the section’s edit icon, go to the Layout tab, and set Content Width to Full Width.
This step is optional. Particles also work in boxed-width sections.
Step 4: Add a Background Color
This step is important. Particles are white by default, so you need a dark or colored background to make them visible.
Click the section’s edit icon, go to the Style tab, and under Background, set a solid color or gradient. Dark blues, blacks, and deep purples work best with the default white particles.
Tip: For a more dynamic look, try using the Animated Gradient Background extension from Master Addons instead of a solid color. Gradient backgrounds combined with particles create a stunning visual effect.
Step 5: Enable the Particles Effect
Now for the main part. With the section selected, stay on the Style tab and scroll down to find the MA Particles section. Toggle it ON.
The default elementor particle effect will appear immediately in your section. You’ll see small white dots floating and connecting with thin lines.
If the default effect looks good for your design, you’re done. Hit Update to save. But if you want to customize the particle style, keep reading.
How to Customize Your Elementor Particles Effect
Master Addons lets you fully customize the particles using a visual configurator. You can change the number of particles, their shape, size, speed, color, and movement behavior, all without writing code.
Step 1: Open the Particles Configurator
Below the particles toggle, you’ll see a message: “Click here to generate JSON for the below field.” Click the link to open the particles.js visual configurator.
At the top of the configurator, click “Default” to see the four built-in presets: Default, NASA, Bubble, and Snow. Select any preset as a starting point, or start from the default configuration.
Step 2: Adjust Particle Properties
The configurator has three main sections. Focus on the Particles section for visual customization:
- Number — Controls how many particles appear. Higher values create a denser effect, but use more browser resources.
- Color — Set the particle color. Use white for dark backgrounds, or match your brand colors.
- Shape — Choose from circle, edge (square), triangle, polygon, or star shapes.
- Size — Set the particle size. Enable random size for a more natural look.
- Opacity — Control particle transparency. Partial opacity creates a subtle, elegant effect.
- Line Linked — Enable or disable the connecting lines between nearby particles.
- Movement — Set the speed and direction of particle movement.
Step 3: Download Your Configuration
Once you’re happy with how the particles look in the live preview, scroll to the bottom of the configurator and click “Download Current Config (JSON)”.
A file named particlesjs-config.json will download to your computer.
Step 4: Copy the JSON Code
Open the downloaded particlesjs-config.json file in any text editor (Notepad, VS Code, or TextEdit). Select all the code and copy it.
Don’t edit the JSON manually unless you know what you’re doing. The visual configurator already generated the exact settings you need.
Step 5: Paste into Elementor
Go back to your Elementor editor. In the section’s Style → MA Particles settings, you’ll see a text area labeled for the particles JSON code. Paste the code you copied and click Update.
Your custom particles effect is now live on the page. Preview it to confirm everything looks right.
Creative Ways to Use Particles Backgrounds
Here are some practical use cases for the elementor animated background with particles:
- Hero sections — Add particles to your homepage hero for a tech-forward, modern look. Combine with a headline, subtext, and CTA button.
- Pricing sections — Use a subtle, low-density particle effect behind your pricing table to make it stand out from the rest of the page.
- Testimonial areas — A gentle snow or bubble effect behind testimonials adds visual interest without distracting from the content.
- Footer sections — Add particles to your footer for a polished, finished look at the bottom of the page.
- Coming soon pages — Particles create movement on what would otherwise be a static, single-page layout. Check out our guide on creating an Elementor coming soon page.
- Call-to-action sections — Draw attention to your CTA by placing it on a section with animated particles.
Performance Tips for Particles
Particle effects run on the visitor’s browser using JavaScript. To keep your site fast:
- Limit particle count. 40-80 particles is usually enough for a good visual effect. Going above 150 can slow down older devices.
- Use particles on 1-2 sections per page. Don’t add particles to every section. The effect loses its impact when overused, and it adds processing overhead.
- Test on mobile. Particle effects can drain battery on phones. Consider reducing particle count or disabling the effect on mobile using Elementor’s responsive visibility settings.
- Avoid particles on content-heavy pages. Long blog posts and documentation pages don’t need animated backgrounds. Save particles for landing pages and key sections.
For more performance tips, read our guide on how to speed up Elementor websites.
Other Elementor Background Effects
Particles are just one of several Elementor background effects available in Master Addons. Check out these related extensions:
- Animated Gradient Background — Smooth, shifting color gradients that animate continuously
- Background Slider — Cycle through multiple background images with transition effects
- Rellax (Parallax) — Create depth with parallax scrolling effects
- Reveal — Animated reveal effects when sections scroll into view
All of these are included in Master Addons’ 80+ widgets and extensions.
Frequently Asked Questions
Is the particles background effect free in Master Addons?
The Particles extension is available in the free version of Master Addons with basic presets. The Pro version gives you additional customization options and the ability to use custom JSON configurations. Check the pricing page for plan details.
Do particles work with Elementor containers?
Yes. Master Addons’ Particles extension works with both the older Elementor sections and the newer Flexbox containers. Enable it the same way from the Style tab of any container.
Will particles slow down my website?
Particles run in the browser using JavaScript, so they add some processing overhead on the client side. With 40-80 particles, the impact is minimal on modern devices. Avoid using more than 150 particles or adding the effect to multiple sections on the same page. The particles.js library is lightweight (around 25KB), so the file size impact on page load is negligible.
Can I change the particle color to match my brand?
Yes. Use the particles.js visual configurator (linked from the extension settings) to change particle color, shape, size, speed, opacity, and more. You can set any hex color value for the particles and the connecting lines independently.
How do I disable particles on mobile?
You can use Elementor’s built-in responsive visibility settings to hide the particles section on mobile devices. Alternatively, create a separate mobile-optimized section without particles. This saves battery and processing power on phones and tablets.
Start Adding Particles to Your Elementor Site
Adding an elementor particles background takes just a few clicks with Master Addons. Choose from built-in presets like NASA, Bubble, or Snow for a quick setup, or create your own custom effect with the particles.js configurator for full control.
The key is to use particles strategically. Pick one or two high-impact sections, choose a dark background, and keep the particle count reasonable. That’s all it takes to turn a static page into something that feels alive.
Ready to try it? Download Master Addons for Elementor and add your first particles background in under 5 minutes.
