Background Effects for Divi

Q: The effect looks faint, or barely moves. What is wrong?

Check these first: Effect Opacity may be low. Speed may be set to 0, which stops the animation. Mouse Interaction may be 0, which turns off the cursor reaction. Blend Mode may be hiding the effect against the element’s background. Colors: most effects are designed for dark sections, so light colors on a white section can almost disappear. Dot Grid, Threads, Wavy Lines and Moving Grid work well on light backgrounds.

Give any section, row, column or module a living background. Choose from 46 animated effects, from soft auroras and starfields to fluid ink and glowing grids, set your colors and watch them react to the cursor, all inside the Divi Builder.

Divi 5 Ready

Divi Pixel Feature

46 animated backgrounds for any element

Background Effects adds a new group to the Advanced tab of every Divi 5 section, row, column and module. Switch it on, pick an effect, set up to three colors, the speed and how strongly it follows the cursor, and see the result live in the Visual Builder. Effects only load on pages that use them, pause when they scroll out of view, and hold still for visitors who prefer reduced motion.

Demo 1Download

SAAS HERO

Launch Your Next Big Idea

A deep starfield drifts and slowly turns behind your headline. Move your cursor across the section and the stars step aside.

Start Free Trial



Launch in minutes

Go from sign-up to your first project before your coffee gets cold.



Secure by default

Encrypted data, single sign-on and daily backups on every plan.



Grows with you

From a solo founder to a team of hundreds, without switching tools.

Effect: Galaxy · Cursor Repulsion on

Demo 2Download

PRODUCTIVITY

Everything Your Team Needs in One Place

Fine threads wave gently behind the copy and bend toward the cursor, a calm effect that works on a white section.

See All Features

Effect: Threads · Color 1 #f05c12, Effect Opacity 0.55

Demo 3Download

APP LANDING PAGE

Northern Lights for Your Landing Page

Soft curtains of light sway across the top of the section. Pick the colors, the height and how fast they move.

Download the App

Average rating

0M+

Downloads

Countries

Effect: Aurora · default colors

Demo 4Download

INTERACTIVE

The People Behind the Pixels

A small studio of designers and developers who sweat the details. Move your cursor across the section and watch the grid follow along.

Lena Hoffmann

Turns rough ideas into clean, bold brands. Believes every pixel should earn its place.

Lara Reid

Builds fast, accessible Divi sites and makes the tricky interactions feel easy.

Aiko Tanaka

Maps every click before it happens, so visitors always know where to go next.

Effect: Dot Grid · light section, orange Active Color

Demo 5Download



Pre-order bonus

A free accessory for everyone who orders before launch day.



Free shipping

Delivered to your door, wherever you are.



30-day returns

Not in love with it? Send it back, no questions asked.

PRODUCT LAUNCH

Ride the Next Wave

Layered waves roll toward a glowing horizon. The effect brings its own sky color, so the section needs nothing else.

Pre-Order Now

Effect: Gradient Waves · its own sky background

Demo 6Download

EVERY ELEMENT

Works on Sections, Rows, Columns and Modules

Each card below is a column with its own effect. Add one to a single module, like a button or a pricing table, just as easily.

Silk

Folds of shimmering fabric on a column.

Plasma

Two colors melting into each other.

Iridescence

A pearly sheen that ripples under the cursor.

Demo 7Download

EVENTS

Live on Stage This Friday

A beam of light rises through the section and bends toward the cursor. Perfect behind a speaker, a countdown or a ticket button.

Get Your Ticket

}

Doors at 7 PM

Live music from 8 PM until late.



Main Hall

Seated and standing tickets available.



12 artists

Three stages, one unforgettable night.

Effect: Light Pillar · Mouse Interaction 20

Demo 8Download



Worldwide network

Pick-up and delivery in over 200 countries.

}

Live tracking

Know where every parcel is, every minute.



Insured shipments

Every package covered from door to door.

LOGISTICS

Shipping Made Simple

A grid of hexagons glides diagonally across the section, and the cells under the cursor fill with color.

Get a Quote

Effect: Moving Grid · Hexagons, Diagonal

Demo 9Download

SPA & WELLNESS

Dive Into Summer

Light dances across the section like sunlight at the bottom of a pool. Set the base and highlight colors to match your brand.

Book a Treatment



Massage

Deep tissue, hot stone and aromatherapy.



Pool & sauna

A heated pool, a sauna and a steam room.



Yoga

Morning and evening classes for every level.

Effect: Light Ribbons · teal base, aqua highlight

THE FULL COLLECTION

All 46 Effects

Every effect below runs live with its default settings. Scroll through, move your cursor over them, and click the ones that react to clicks.

Aurora

Color Bends

Color Burst

Corner Rays

Crystal Shards

Dither Waves

Dot Grid

Fiber Tunnel

Flowing Lines

Fluid Ink

Galaxy

Glow Band

Glow Orb

Glyph Waves

Gradient Blinds

Gradient Hills

Gradient Waves

Grainy Gradient

Grid Room

Image Distortion

Iridescence

Letter Glitch

Light Pillar

Light Rain

Light Ribbons

Light Threads

Lightning

Line Warp

Liquid Caustics

Moving Grid

Particle Field

Pixel Snow

Plasma

Psychedelic Swirl

Radar

Ripple Grid

Signal Scanner

Silk

Slatted Waves

Soft Aurora

Spotlight Rays

Square Corridor

Threads

Tile Motion

Topography

Wavy Lines

Three Steps

From any element to a finished effect

Open any element

Hover a section, row, column or module in the Visual Builder and open its settings.

Go to Advanced

Switch to the Advanced tab and find the Background Effects group.

Switch it on

Toggle Enable Background Effect, then set the style, colour and size.

STILL WONDERING?

The short answers

Do I need to write any CSS?

No. Everything is set in the Background Effects group: the effect, up to three colors, a background color, speed, cursor interaction, opacity, blend mode and quality. The effect also follows your element’s rounded corners automatically.

Does it respect reduced motion?

Yes. Visitors whose system is set to reduce motion see a single still frame of the effect instead of an animation.

Does it work in Divi 4?

No. Background Effects is built for Divi 5 only. Once you switch it on in Divi Pixel → General, it appears on every Divi 5 element.

The effect looks faint, or barely moves. What is wrong?

Check these first:

Effect Opacity may be low.
Speed may be set to 0, which stops the animation.
Mouse Interaction may be 0, which turns off the cursor reaction.
Blend Mode may be hiding the effect against the element’s background.
Colors: most effects are designed for dark sections, so light colors on a white section can almost disappear. Dot Grid, Threads, Wavy Lines and Moving Grid work well on light backgrounds.

What is Background Effects?

A Divi Pixel feature that adds an animated background to any Divi 5 element. There are 46 effects, from auroras and starfields to fluid ink, light rays and neon grids. You can set your own colors, the speed and how strongly it reacts to the cursor, all in the Visual Builder with a live preview.

Which elements can I use it on?

Any section, row, column or module. Open its settings, go to the Advanced tab and you’ll find the Background Effects group. Each element can have its own effect, so a row of cards can show three different effects side by side.

Will it slow down my site?

Background Effects is built to stay light:

Pages only load the effects they actually use.
Each effect starts just before it scrolls into view and pauses as soon as it leaves the screen.
Effects also pause while the browser tab is in the background.
Slower effects are capped at 30 frames per second.

On large sections, keep Render Quality on Medium, or use Low for soft effects like Aurora or Plasma.

Will my text and buttons still work on top of it?

Yes. The effect is painted behind the element’s content and never captures clicks, so buttons, links and forms work as usual. If a busy effect makes text hard to read, lower Effect Opacity. For effects like Letter Glitch, putting the copy on a semi-transparent panel helps.

Enhance your Divi Theme with Custom Settings and New Modules. Start Creating Awesome Websites with Divi Pixel

See Pricing

We offer a 14 Day Money Back Guarantee, so joining is Risk-Free!