---
title: "How to Add an Animated Color Background in Elementor?"
url: https://theplusaddons.com/docs/add-an-animated-color-background-in-elementor/
date: 2025-01-10
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A background that slowly shifts between colours draws the eye to a section without any extra content. The Row Background widget from The Plus Addons for Elementor can fade the..."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Add-an-Animated-Color-Background-in-Elementor_-1024x536.jpg
word_count: 352
---

# How to Add an Animated Color Background in Elementor?

## 

- Row Background de The Plus Addons for Elementor crea un fondo animado que se desvanece entre una lista de colores y vuelve a empezar después del último color.
- The Plus Addons for Elementor Pro es obligatorio para usar Row Background, y el widget se activa en The Plus Addons > Widgets antes de colocarlo dentro de un container o classic section.
- Animation Duration se configura en milisegundos, con valor predeterminado 3000; el desvanecimiento dura unos tres segundos y, si baja de 3000, los colores se mezclan sin detenerse en un color puro.

A background that slowly shifts between colours draws the eye to a section without any extra content.

The **Row Background** widget from The Plus Addons for Elementor can fade the background of a container through a list of colours, over and over.

*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 **Animated Background Color**.- In **Select Multiple Colors**, open each item and pick its **Color**. There are three items to start with; use **+ Add Item** for more.

![The Select Multiple Colors list of an Animated Background Color deep layer](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-animated-colors.webp)

- Enter the **Animation Duration** in milliseconds (default 3000).

![The Animation Duration field below the colour list](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-animated-duration.webp)

![Adding colours to an animated colour background](https://theplusaddons.com/wp-content/uploads/2025/01/row-background-animated-color-background.gif)

## How It Behaves

- The background starts with the first colour and fades to the next one, then the next, and starts again after the last colour.- **Animation Duration** sets how often the change to the next colour starts. The fade itself always takes about three seconds, so with values below 3000 the colours keep blending without ever resting on one colour (tested with 2000).- The **Select Image** field inside each item is not used by this option. It belongs to On Scroll Background Animation.

![Published container while its background fades from green to blue](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-result-animated-color.webp)

![A section background fading through several colours](https://theplusaddons.com/wp-content/uploads/2025/01/row-background-animated-color-background-demo-1.gif)

## Limitations

- The fade length cannot be changed; only the time between colour changes can.- The colours change as a flat fill. For a moving multi-colour gradient, use Gradient Animate Color.

## Troubleshooting

### The background never shows a pure colour

Set **Animation Duration** higher than 3000, for example 5000, so each colour has time to finish fading in.

## Related Docs

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

## Frequently Asked Questions

**Q: What do I need before adding an animated color background in Elementor?**
A: The Row Background widget has to be available in The Plus Addons for Elementor Pro, and it needs to be switched on under The Plus Addons > Widgets. It also has to sit inside the container or classic section that should receive the effect, because the widget itself draws nothing. That setup matters: the background belongs to the parent container, not to the widget as a visible element.

**Q: How do I make a section background slowly cycle through colors instead of staying static?**
A: The Row Background widget from The Plus Addons for Elementor fades a container background through a list of colors and then repeats the cycle. In Content > Deep Layer, set Select Option to Animated Background Color, add your colors in Select Multiple Colors, and set Animation Duration in milliseconds. The default duration is 3000, which controls when the next fade starts, not how long the fade itself lasts.

**Q: Why does my animated color background never stop on one solid color?**
A: That usually happens when Animation Duration is below 3000 milliseconds. The fade itself takes about three seconds, so shorter durations make the next color start blending before the current one fully settles. A higher value like 5000 gives each color time to finish fading in, which is why pure color frames become visible again.

**Q: Can I use an animated color background for a moving gradient effect?**
A: Not with this option. Animated Background Color uses a flat fill that changes between solid colors, while a moving multi-color gradient needs Gradient Animate Color instead. That distinction matters because the page treats these as different behaviors: one cycles solid fills, the other animates a gradient.

**Q: What is the best Animation Duration for an animated color background?**
A: A duration above 3000 milliseconds is the safer choice if you want each color to read as a distinct stop. The page notes that 2000 milliseconds keeps colors blending without ever resting on one color, so shorter values create a constant transition look. If you want slower, more readable shifts, 5000 is a practical example.

**Q: Does the Select Image field matter when using Animated Background Color?**
A: No. The Select Image field inside each item is not used by Animated Background Color and belongs to On Scroll Background Animation instead. That’s an easy place to get misled if you are reusing settings from another background mode. For this effect, only the color list and Animation Duration control what you see.