---
title: "How to Add an Animated Gradient Background in Elementor?"
url: https://theplusaddons.com/docs/add-an-animated-gradient-background-in-elementor/
date: 2025-01-10
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "An animated gradient slowly moves its colours across the background, which works well behind hero sections. The Row Background widget from The Plus Addons for Elementor builds the gradient from..."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Add-an-Animated-Gradient-Background-in-Elementor_-1024x536.jpg
word_count: 419
---

# How to Add an Animated Gradient Background in Elementor?

## 

- Row Background de The Plus Addons for Elementor Pro crea un degradado animado con los colores elegidos y lo mantiene en movimiento dentro de un contenedor o detrás de toda la página.
- La configuración usa Content > Deep Layer, Select Option en Gradient Animate Color y Select Multiple Colors para definir varios colores, con Animation Duration de 1 a 30 segundos y valor predeterminado de 15.
- Full Page Background requiere Position en Relative para cubrir toda la página; con Inherit, la prueba muestra que el degradado cubre solo la primera pantalla de una página de 1800 px.

An animated gradient slowly moves its colours across the background, which works well behind hero sections.

The **Row Background** widget from The Plus Addons for Elementor builds the gradient from your colours and keeps it moving, either inside one container or behind the whole page.

*To check the complete feature overview documentation of The Plus Addons for Elementor Row Background widget, [click here](https://theplusaddons.com/docs/create-a-multi-layer-elementor-background/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/section-background/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — the Row Background widget is only available in The Plus Addons for Elementor Pro.- **Widget to enable:** Row Background, switched on under **The Plus Addons > Widgets**.- **Where to put it:** drop the widget inside the container (or classic section) that should get the background. It draws nothing of its own; the background fills that container.

## Steps

- Add the Row Background widget to the container and open **Content > Deep Layer**.- Set **Select Option** to **Gradient Animate Color**.- In **Select Multiple Colors**, set a **Color** for each item. Use **+ Add Item** for more colours.

![The colour list of a Gradient Animate Color deep layer with the gradient on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-animgrad-colors.webp)

- Set **Animation Duration** (1 to 30 seconds, default 15) and **Animate Rotate Color** (the gradient angle, default 120).- To cover the whole page, turn on **Full Page Background** and set **Position** to **Relative**.

![The Full Page Background switch and Position dropdown of the animated gradient](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-animgrad-options.webp)

The recording below shows these steps in the editor, followed by a short demo of the result.

![Setting up an animated gradient background](https://theplusaddons.com/wp-content/uploads/2025/01/row-background-gradient-animated-color.gif)

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Select Multiple Colors** | The colours of the gradient, in order. | 3 colours |
| **Animation Duration** | Length of one animation cycle, in seconds. | 15 |
| **Animate Rotate Color** | Angle of the gradient, in degrees. | 120 |
| **Full Page Background** | Moves the gradient behind the whole page instead of the container. | Off |
| **Position** | Inherit or Relative. Use Relative with Full Page Background. | Inherit |

## How It Behaves

- The gradient is drawn much larger than the container and slides back and forth, so the colours drift across it. With 4 colours and a 4-second duration the movement was clearly visible.- With **Full Page Background** on, the gradient is placed behind the whole page, not just the container. The panel recommends the **Elementor Canvas** page layout for this.

![Published container with a moving blue, red, green and purple gradient](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-result-anim-gradient.webp)

## Limitations

- With **Full Page Background** and **Position** left on **Inherit**, the gradient covered only the first screen of the page in our test (900 px of an 1800 px page). Set **Position** to **Relative** to cover the whole page.

## Troubleshooting

### The full-page gradient stops halfway down the page

Set **Position** to **Relative**.

### The gradient moves too slowly

Lower **Animation Duration**.

## Related Docs

- [Row Background widget: settings overview](https://theplusaddons.com/docs/create-a-multi-layer-elementor-background/)- [Add a gradient background](https://theplusaddons.com/docs/add-gradient-background-in-elementor/)- [Add an animated colour background](https://theplusaddons.com/docs/add-an-animated-color-background-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding an animated gradient background in Elementor?**
A: The Row Background widget has to be available in The Plus Addons for Elementor Pro, and it must be switched on under The Plus Addons > Widgets. The widget is placed inside the container or classic section that should receive the effect, because it does not draw anything by itself. That matters if you expect the background to appear globally without attaching it to a specific section.

**Q: How do I make the gradient move behind the whole page instead of just one section?**
A: Full-page movement comes from turning on Full Page Background and setting Position to Relative. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses that combination to place the animated gradient behind the whole page rather than only inside the container. The page also notes that Elementor Canvas is the recommended layout for this setup, which helps the background behave more predictably across the page.

**Q: Why does my full-page gradient stop halfway down the page?**
A: That usually happens when Full Page Background is on but Position is still left on Inherit. In the page test, the gradient covered only the first screen of an 1800 px page when Position was not changed. Switching Position to Relative fixes that behavior and lets the background extend through the full page instead of stopping early.

**Q: How can I make an animated gradient move faster?**
A: Animation Duration controls how long one animation cycle takes, so a lower value makes the motion faster. The page gives a range of 1 to 30 seconds and shows 15 seconds as the default. If the movement feels too subtle behind a hero section, reducing that duration is the quickest way to make the colour drift more obvious.

**Q: Can I use an animated gradient background behind a hero section?**
A: That is one of the main use cases for this effect. The page says an animated gradient slowly moves its colours across the background and works well behind hero sections. The Row Background widget builds the gradient from your colours and keeps it moving either inside one container or behind the whole page, so it fits both focused hero areas and broader page backgrounds.

**Q: What is the difference between a normal gradient and an animated gradient in this widget?**
A: A normal gradient stays static, while this animated version keeps sliding its colours across a much larger background area. The page describes it as being drawn much larger than the container so the colours drift back and forth. If you want motion without adding extra elements, this is a cleaner fit than a static gradient because the movement comes from the background itself.