---
title: "How to Add an Animated Gradient Color Background in a WordPress Container?"
url: https://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://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

- Nexter Blocks Container block adds an animated gradient color background in WordPress by going to Style > Background Deep Layer and selecting Gradient Animated Color from the Select Background Option dropdown.
- Color List starts with three color items by default, and the + Add Gradient button adds more colors for the generated gradient.
- Animation Duration(s), Animate Rotate Color, Full Page Background, and Position control the timing, angle, full-page display, and full-page div position of the animated gradient background.

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://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://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.