Create Stunning Animated Gradient Backgrounds in Elementor

Peter Long — Sat, 01 Aug 2026 12:22:34 +0000

Static backgrounds are useful, but animated gradients can make your Elementor designs feel more modern, dynamic, and engaging. ✨

With Master Addons Animated Gradient BG, you can create beautiful flowing gradient backgrounds without writing custom code.

🎨 Add multiple gradient colors
↗️ Control the animation angle
⚡ Adjust the animation speed
🌊 Choose smooth animation easing
🖥️ Apply it to Elementor sections, containers, and columns

Create eye-catching hero sections, modern call-to-action areas, creative landing pages, and premium website layouts with animated background effects.

Try Animated Gradient BG and bring your Elementor designs to life.

Create Stunning Animated Backgrounds in Elementor with Master Addons Background Slider

Peter Long — Thu, 30 Jul 2026 11:00:35 +0000

Static backgrounds can make a website feel ordinary. With the Master Addons Background Slider extension, you can transform any Elementor section, container, or column into a dynamic image slideshow.

Add multiple background images, select smooth transitions, apply beautiful Ken Burns animations, and use overlays to keep your headings and buttons easy to read. You can also control slide delay, image display, animation effects, and more.

Create modern hero sections, business websites, portfolios, travel pages, product showcases, and engaging landing pages without writing custom code.

Try Master Addons Background Slider and give your Elementor website a more interactive and professional visual experience.

Elementor #WordPress #MasterAddons #WebDesign #BackgroundSlider #NoCode

How I Added Interactive Particle Backgrounds to Elementor Without Writing a Line of JavaScript

Peter Long — Wed, 29 Jul 2026 08:22:12 +0000

Every landing page hits the same wall eventually: the hero section is fine, but it's flat. You've got your headline, your subhead, two buttons — and a background that just sits there.

The usual fix is a looping background video. It works, and it also drags 8–15 MB onto your critical path and tanks your LCP on mobile. Not a great trade.

I've been using the Particles extension in Master Addons for Elementor instead, and it solves the same problem for a fraction of the weight. Here's how it works and what I've learned tuning it.

What it actually is
It's a wrapper around particles.js — the library behind about half the "floating dots connected by lines" hero sections you've seen — exposed as a native Elementor control instead of a script you have to enqueue yourself.

The important part: it applies per container/section, not per page. So a single page can run a starfield in the hero, a connected-node network in the features block, and nothing at all below the fold.

Setup
Enable it once under Master Addons → Extensions → Particles.
In the Elementor editor, select your section or container.
Go to the Style tab and scroll to MA Particles.
Toggle it on.
Default effect renders immediately. Two things to know before you wonder why nothing appeared:

Particles are white by default. On a light background they're invisible. You need a dark or saturated fill — deep navy, near-black, deep purple.
The section needs height. An empty container collapses. Drop in a Spacer at 400–600px, or let real content give it dimension.
Customising it
Under the toggle there's a "Click here to generate JSON" link that opens the particles.js configurator. You get four starting presets:

Preset Good for
Default SaaS, tech, product pages
NASA Dark, dramatic hero sections
Bubble Creative and portfolio work
Snow Seasonal / campaign pages
Adjust with sliders and colour pickers, hit download, and you get a particlesjs-config.json. Paste its contents into the JSON field in Elementor. That's the whole loop — no build step, no enqueue, no theme file edits.

What's exposed:

Particles — count, colour, opacity, size, shape
Shapes — circle, triangle, star, polygon, or a custom image (yes, you can make your own logo the particle)
Line linking — on/off, distance, colour, opacity, width
Movement — speed, direction, straight vs. random, out-of-canvas behaviour
Interactivity — hover to connect or repulse, click to push, bounce off edges
Z-index — so the field sits behind your content instead of over it
Performance notes
This is the part people skip, and then wonder why their PageSpeed score moved.

Keep the particle count between 40 and 80. The default configurator preset ships higher than you want. Particle count drives per-frame canvas work linearly, and line_linked makes it worse — link calculation is O(n²) over the particle set. Going from 80 to 160 particles doesn't double the cost, it roughly quadruples the link math.
One or two sections per page, maximum. Every enabled section is its own canvas and its own rAF loop. Three particle sections on one page means three animation loops competing for the main thread.
Turn off line_linked before you turn down the count if you need to claw back frames. It's usually the more expensive half.
Test on a real mid-range phone, not just a throttled desktop profile. If it stutters, disable it at the mobile breakpoint — the effect is decorative, and nobody misses it on a 390px viewport.
Compared to a background video, you're trading a multi-megabyte download for a few KB of library and some GPU-friendly canvas work. On the pages I've moved over, LCP improved because the hero no longer waits on a video to start painting.

Where it earns its keep
Hero sections on SaaS and product landing pages
Portfolio splash screens
Section dividers between content blocks
Footers, at very low particle counts
Event and campaign pages where you want motion without a video budget
Caveats
It's a Pro feature — the free version of Master Addons doesn't include it. Interactivity is reduced on touch devices, which is inherent to the effect rather than the implementation: there's no persistent cursor position to react to, so hover-connect and repulse simply don't fire. The ambient drift still works fine.

And the obvious one: it's decoration. It won't rescue a weak headline. But when the copy is already doing its job, this is the cheapest "this site feels considered" upgrade I know of.

Docs: https://master-addons.com/extension/particles/
Tutorial: https://master-addons.com/add-particles-background-in-elementor-section/

DEV Community: Peter Long

Create Stunning Animated Gradient Backgrounds in Elementor

Create Stunning Animated Backgrounds in Elementor with Master Addons Background Slider

Elementor #WordPress #MasterAddons #WebDesign #BackgroundSlider #NoCode

How I Added Interactive Particle Backgrounds to Elementor Without Writing a Line of JavaScript