Elementor Animated Gradient Background (Pro): Moving Gradient Sections
Animated Gradient BG is a Master Addons Pro extension that puts a slowly moving linear gradient behind a container, section or column. You pick two or more colors, the angle, the duration and the easing, and the gradient drifts back and forth in a loop without any image or video file. It is often used for hero sections, call-to-action bands and coming soon pages. For gradient-colored text instead of a background, try the free Gradient Headline widget.
Two or More Colors, One Moving Gradient
Add colors in the Color list, one row per color. The extension needs at least two. It spaces them evenly across a linear gradient and repeats the first color at the end, so the loop has no hard edge. There are no settings for color stop positions or a radial gradient. The editor preview updates as you pick colors.
- Color list: add, duplicate or delete rows. Two to four colors usually read best.
- Transparent colors: the gradient sits on its own layer above the section’s normal background, so colors with transparency let a background image show through.
- Where it works: containers, sections and columns, in the Style tab. Widgets don’t get the panel.
Angle, Duration and Easing
Angle sets the direction of the gradient from -45 to 180 degrees, with -45 as the default. Total Animation Duration (Seconds) runs from 1 to 20 and defaults to 6. It is the time the gradient takes to drift across and back. Animation Effect sets the easing: Linear, Ease, Ease In, Ease Out, Ease In Out, or one of three smooth curves, with Material Design (Smooth) as the default.
- Slow and subtle: 12 to 20 seconds works well behind hero text.
- Always on: the loop starts when the page loads and has no hover or scroll trigger.
- Transition Smoothness: this slider shows in the panel, but it does not change the animation in the current version.
Elementor Gradient Background vs Animated Gradient BG
Elementor’s free Background setting has a Gradient type (checked on Elementor 4.2.4), but the gradient does not move. You can animate it by writing CSS keyframes yourself, or use the extension.
| Feature | Elementor Gradient | CSS by hand | Animated Gradient BG |
|---|---|---|---|
| Price | Free | Free | Master Addons Pro |
| Movement | Static | Yes, you write the keyframes | Yes, built in |
| Colors | 2, with stop locations | Any | 2 or more, evenly spaced |
| Gradient type | Linear or radial | Any | Linear only |
| Angle | 0 to 360, per device | Any | -45 to 180 |
| Speed and easing | No | Yes | Duration 1 to 20 s, 8 easing options |
| Set up in | Style panel | Custom CSS | Style panel |
For a still gradient, Elementor’s own setting is enough and gives more control over stops and gradient type. The extension saves you writing keyframes when you want the gradient to move.
Related: Gradient Headline (free) for gradient text, plus Particles (free) and Background Slider (free) for other moving backgrounds.
How to Add an Animated Gradient Background in Elementor
Once the extension is on, the panel appears in the Style tab of every container, section and column. Here is a details documentation on Animated Gradient Background.
- With Master Addons Pro active, go to Master Addons > Extensions and switch on Animated Gradient BG.
- Edit your page with Elementor and select a container, section or column.
- Open the Style tab and expand Animated Gradient Background.
- Set Enable Animated Gradient to Yes. Three sample colors appear.
- Change the colors in the Color list, then set Angle, Total Animation Duration (Seconds) and Animation Effect.
- Update the page and check that your text stays readable against every color.
Frequently Asked Questions For Animated Gradient BG
Is Animated Gradient BG free?
No. It is part of Master Addons Pro. Elementor’s free Gradient background is static, so a moving gradient needs this extension or your own CSS.
Can I use it over a background image?
Yes. The gradient is drawn on its own layer above the section’s normal background. Pick colors with some transparency in the color picker and the background image shows through.
How many colors can I use in one animation?
At least two, and as many as you add after that. The colors are spaced evenly, so two to four usually give the cleanest result.
Does the animation play all the time, or can I make it play on hover?
It plays all the time. The loop starts when the page loads and has no hover or scroll trigger. For a hover-only effect you would need your own CSS, for example with the Custom CSS extension.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
![Master Addons Post/Page Duplicator extension for Elementor: MA Duplicator row link in the WordPress Pages list creating a Landing Page - [Duplicated #128] draft](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
