Animated Gradient is a Divi Essential extension that adds 21 types of fluid, animated gradient backgrounds to any Divi Essential module. Instead of a static color or image, your module backgrounds come alive — shifting, pulsing, and responding to mouse movement in real time.
⚠️ Important: Animated Gradient is an Extension, not a module. It does not appear in the Divi Builder module list. It adds settings to the Design tab of existing Divi Essential modules. It does not work on native Divi modules.
How to Enable
Step 1: Go to WordPress Admin → Divi Essential → Extensions
Step 2: Find Animated Gradient and toggle it On
Step 3: Open any Divi Essential module in the Divi Builder
Step 4: Go to the Design tab → Animated Gradient section
Step 5: Toggle Animate Gradient on and configure your settings
Settings Reference
Animate Gradient
Type: Toggle Default: Off Turns the animated gradient on or off for the module. Must be enabled for all other settings to appear.
Animation Type
Type: Dropdown Default: Color Shift
Choose from 21 animation types:
# | Type | Description |
|---|---|---|
| 01 | Color Shift | Smoothly cycles through a defined color palette |
| 02 | Flowing Wave | Undulating wave patterns across the background |
| 03 | Radial Pulse | Pulses outward from center with expanding rings |
| 04 | Aurora Borealis | Flowing color curtains mimicking northern lights |
| 05 | Mesh Gradient | Organic mesh pattern that morphs continuously |
| 06 | Sunset Animation | Warm orange to purple color transitions |
| 07 | Neon Pulse | Electric neon colors with glowing intensity pulses |
| 08 | Liquid Metal | Metallic sheen with flowing reflective gradients |
| 09 | Rotating Conic | Conic gradient that rotates continuously |
| 10 | Ocean Waves | Deep blue tones with wave-like flow patterns |
| 11 | Fire Blaze | Warm red-orange flames with heat distortion |
| 12 | Holographic | Iridescent rainbow shimmer effect |
| 13 | Mouse Follow | Gradient follows and reacts to cursor position |
| 14 | Stripe Wave | Diagonal stripes that animate in waves |
| 15 | Galaxy Swirl | Deep space swirling with star-like sparkles |
| 16 | Plasma Field | Electric plasma energy field simulation |
| 17 | Gradient Border | Animated gradient applied to element borders |
| 18 | Noise Grain | Organic grainy texture with shifting gradient |
| 19 | Scroll Reactive | Gradient changes dynamically as you scroll |
| 20 | Morphing Blobs | Organic blob shapes that morph and shift colors |
| 21 | Custom Animation | Full manual control over a custom gradient |
Speed
Type: Slider Default: 1 Controls animation duration. Lower values = faster animation. Higher values = slower, more subtle shifts.
Intensity
Type: Slider Default: 1 Controls the vividness and contrast of the gradient colors. Higher intensity = more vibrant colors.
Mouse Interactive
Type: Toggle Default: Off When enabled, the gradient responds to the visitor's cursor position in real time — shifting and moving as the mouse moves across the module.
Mouse Strength
Type: Slider Appears when: Mouse Interactive is On Controls how strongly the cursor influences the gradient direction and movement.
Pro Tips
💡 Use Scroll Reactive on hero sections — as visitors scroll into the section, the gradient transitions dynamically, creating an immersive entry experience.
💡 Mouse Follow works best on CTAs and feature cards — it draws the eye and rewards interaction, increasing time-on-page.
💡 Each module is independent — you can mix different animation types across modules on the same page. A hero with Aurora Borealis and a CTA card with Neon Pulse can coexist.
💡 Pair with dark backgrounds — most gradient types are visually strongest against dark module backgrounds. Light backgrounds can wash out the effect.💡 Reduce intensity for professional sites — for corporate or SaaS sites, keep intensity low (20–40%) for a subtle, premium feel.
FAQ
Q: Does Animated Gradient work on native Divi modules (Blurb, CTA, etc.)?
A: No. It works exclusively on Divi Essential modules (105+).
Q: Will it slow my site down?
A: No. The extension uses GPU-accelerated CSS animations with no meaningful impact on page load time.
Q: Can I use different animation types on different modules on the same page?
A: Yes. Every module has fully independent settings — animation type, speed, intensity, and mouse interaction are all configured per module.
Q: What is the Custom Animation type?
A: It unlocks full manual control over a gradient animation, giving you complete freedom beyond the 20 presets.
Q: Does Animated Gradient require coding?
A: Never. All settings are controlled directly from the Divi Builder Design tab.