---
title: "How to Add an Animated Gradient Color Background in a WordPress Container?"
url: https://qa.nexterwp.com/docs/add-an-animated-gradient-color-background-in-a-wordpress-container/
date: 2024-11-28
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to add an animated gradient color background to a section in WordPress? Animated gradient color background can enhance the aesthetics of your website. With the Container block..."
image: https://qa.nexterwp.com/wp-content/uploads/2024/11/How-to-Add-an-Animated-Gradient-Color-Background-in-a-WordPress-Container_-1024x519.jpg
word_count: 235
---

# How to Add an Animated Gradient Color Background in a WordPress Container?

## Key Takeaways

- Utilizes the Container block from Nexter Blocks to add an animated gradient color background in WordPress.
- Selects Gradient Animated Color from the Select Background Option dropdown to customize the background.
- Enables Full Page Background toggle to extend the animated gradient across the entire page.

Do you want to add an animated gradient color background to a section in WordPress? Animated gradient color background can enhance the aesthetics of your website.

With the Container block from the Nexter Blocks, you can easily add an animated gradient color background to a section in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Container block,* [click here](https://qa.nexterwp.com/docs/add-a-container-in-wordpress/).

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://qa.nexterwp.com/nexter-blocks/blocks/wordpress-container/)

Add the Container block with the appropriate layout to the page and follow the steps -

1. Go to **Style** > **Background Deep Layer**.

2. Select **Gradient Animated Color** from the **Select Background Option** dropdown.

3. In the **Color List** section, you’ll find three color items by default.

In each item, you can add a single color, based on these colors it will auto generate gradient colors.

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

From the **Animation Duration(s)** field, you can set the animation duration for changing one color to the other.

Then from the **Animate Rotate Color** field, you can set the gradient color angle.

By enabling the **Full Page Background** toggle, you can make the section full page.

Then from the **Position** dropdown, you can set the full page div position.

Now you’ll see an animated gradient color background.