Animated Gradients for Divi

Bring any Divi gradient to life. Turn on Animate in the Background group of any section, row, column or module and choose from 24 animations, from slow-moving mesh light and aurora glows to seawaves, light rays and morphing blobs, all in your own gradient colors.

Divi 5 Ready

Divi Pixel Feature

Your gradients, in motion

Animated Gradients adds an Animate switch to the Background group of every Divi 5 section, row, column and module. It animates the gradient you already set, using its own colors, so there is nothing new to design. Pick one of 24 animation types, set the speed and duration, and see it live in the Visual Builder. Your content always stays on top, and visitors who prefer reduced motion see a still gradient.

Demo 1Download
SAAS LANDING PAGE

Ship Faster With Your Whole Team

Wide, soft glows drift and fade into each other like light on the horizon, all in the four colors of this section’s gradient.

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.

Animation Type: Linear Movement · 4 gradient stops

Demo 2Download
WELLNESS

Feel Better, One Day at a Time

Soft discs of light, one per gradient color, float slowly over a warm pastel gradient. A calm motion that never pulls focus from the copy.

Start Your Plan

Animation Type: Swirl · pastel gradient

Daily check-ins

Two minutes a day to see how you really feel.

Habit planner

Small, steady steps that fit your week.

}

Guided breaks

Breathing and stretching sessions on your schedule.

Coach on call

Real people, ready when you need a nudge.

Demo 3Download
MUSIC FESTIVAL

Three Days. Five Stages. One Summer.

Blobs of light, one per color, orbit the center and blend where they cross, a living backdrop for a lineup announcement.

Get Festival Pass

60+

Artists

5

Stages

3

Days of music

Animation Type: Plasma Field · 4 gradient stops

Demo 4Download

Branding

Logos, colors and type that tell your story.

Web design

Fast, beautiful Divi sites built to convert.

Photography

Product and team shoots in our own studio.

Marketing

Campaigns that turn visitors into customers.

CREATIVE AGENCY

Design That Moves People

Two blurred blobs drift and change shape over a soft pastel gradient, motion that feels handmade rather than mechanical.

Start a Project

Animation Type: Line Waves · pastel gradient

Demo 5Download
EVENTS

Live on Stage This Friday

Rays of light in the gradient colors fan out from an edge and pulse softly, perfect behind a headliner 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.

Animation Type: Morphing Blobs

Three Steps

From a static gradient to a living one

1

Open any element

Opensettingsofasection, row, column or module in the Visual Builder

2

Set a gradient

In the Content tab, open Background, switch to the Gradient tab and add your colors.

3

Animate it

Turn on Animate, pick an Animation Type and set the speed and duration.

STILL WONDERING?

The short answers

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!