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

Key Takeaways

  • Nexter Blocks allows users to add an animated color background using the Container block.
  • The Container block includes three default color items, with the option to add more colors using the + Add Color button.
  • Users can customize animation duration and delay for color changes in the Animation Duration(s) and Animation Delay(s) fields.
Table of Contents

Do you want to add an animated color background section in WordPress? Adding an animated color background to a section can elevate the overall aesthetic of your website and leave a lasting impression on your audience.

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

To check the complete feature overview documentation of the Nexter Blocks Container block, click here.

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

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

1. Go to Style > Background Deep Layer.

2. Select 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.

You can click on the + Add Color 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 Animation Delay(s) field, you can add a delay between color changes.

Now you’ll see an animated color background.

About the Author

Photo of Aditya Sharma CMO of NexterWP
CMO at POSIMYTH Innovations · NexterWP · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordpressThemesElementorn8nAIClaudeAutomationServer

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Related Frequently Asked Questions

What should I do if the animated color background isn't showing up?

If the animated color background isn't displaying, ensure that the Nexter Blocks are installed and activated. This block is essential for adding the animated background. Additionally, double-check that you've selected 'Animated Color' from the Select Background Option dropdown in the Container block settings.

What is the best way to set the animation duration for the color changes?

Setting the animation duration is crucial for achieving the desired visual effect. You can adjust the Animation Duration(s) field to control how long it takes for one color to transition to another. A shorter duration creates a quicker change, while a longer duration results in a smoother, more gradual transition.

Does the animated color background work on mobile devices?

The animated color background created with the Nexter Blocks is designed to be responsive, meaning it should work well on mobile devices. However, always test your design on various screen sizes to ensure the animation looks good and performs well across all devices.

Is there a limit to how many colors I can add to the animated background?

There isn't a specified limit to the number of colors you can add to the animated background using the Nexter Blocks. You can continue to add colors by clicking the + Add Color button, allowing for a dynamic and colorful background that can enhance your site's aesthetics.

Last reviewed: April 14, 2026

Related Docs