---
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-04-09
lang: en
author: "Aditya Sharma"
description: "Do you want to add an animated color background in Elementor? Animated color backgrounds add a dynamic and eye-catching element to your website, instantly grabbing the viewer's attention. With the..."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Add-an-Animated-Color-Background-in-Elementor_-1024x536.jpg
word_count: 266
---

# How to Add an Animated Color Background in Elementor?

## 

- Utilizes the Row Background widget from The Plus Addons for Elementor to create animated color backgrounds.
- Selects Animated Background Color from the Select Option dropdown under the Deep Layer tab to initiate the effect.
- Allows users to customize color transitions and duration in the Animation Duration field for smooth background changes.

Do you want to add an animated color background in Elementor? Animated color backgrounds add a dynamic and eye-catching element to your website, instantly grabbing the viewer's attention.

With the Row Background widget from The Plus Addons for Elementor, you can easily add an animated color background to a container or section in Elementor.

*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, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/row-background/)

To do this, add the Row Background widget to the container you want to add the animated color background and follow the steps -

1. Select **Animated Background Color** from the **Select Option** dropdown, under the **Deep Layer** tab.

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

2. Then you have to add colors in the **Select Multiple Colors** section. By default, you’ll find three repeater items, open the first one.

3. In the **Color** section add your first color.

> *Note: The rest of the options are for the On Scroll Background Animation option.*

4. Then open the second item and add the second color in the **Color** section. 

Similarly, you can add different colors to the other items.

You can click on the **+ Add Item** button to add more colors.

In the **Animation Duration** field, you can set the color transition duration.

Now you’ll see the background color smoothly changing from one color to another.

For creating a simple animated color background you don’t need to add any background in the other layers.

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