---
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-09-19
lang: en
author: "Aditya Sharma"
description: "A gradient already suggests depth. A gradient that drifts adds movement without adding an image, which makes it one of the cheapest backgrounds you can put on a page. The..."
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: 506
---

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

## Key Takeaways

- Nexter Blocks Pro activa el fondo degradado animado del bloque Container, y sin Nexter Blocks Pro el contenedor se muestra como una sección plana sin clase ni regla de degradado.
- Container construye el degradado a partir de una lista de colores y permite fijar el ángulo y la duración; en una prueba con dos colores, ángulo de 90 y duración de 25, renderiza background-image: linear-gradient(90deg, ...) y animation-duration: 25s.
- El bloque usa CSS real en lugar de una imagen, puede abarcar toda la página con un ajuste separado y, si la lista de colores está vacía, recurre a seis colores integrados.

A gradient already suggests depth. A gradient that drifts adds movement without adding an image, which makes it one of the cheapest backgrounds you can put on a page.

The Container block builds one from a list of colours and animates it.

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

## Before You Start

- **Edition:** **Pro** — animated gradient backgrounds needs Nexter Blocks Pro.- **Block to enable:** Container, switched on under **Nexter > Blocks** in your WordPress dashboard.- A **Container** block with content inside — see the [Container block guide](https://nexterwp.com/docs/add-a-container-in-wordpress/).

## Steps

- Select your **Container** and set its background type to the **animated gradient** option.

- Add the **colours** the gradient should be built from.

- Set the **angle** the gradient runs at.

- Set the **duration** of the movement.

- Publish and check the section on the real page.

## How It Behaves

The gradient is written as a CSS rule on the container, so the colours and angle are real CSS rather than an image.

- **The background option comes first.** Measured: the individual effect settings do nothing on their own — the container only renders an effect once the background type that owns it is chosen.- **Measured on a published page** with two colours, an angle of 90 and a duration of 25: the container rendered `tpgb-row-bg-gradient` with inline `background-image: linear-gradient(90deg, …)` and `animation-duration: 25s`.- **Leaving the colour list empty does not break it** — the block falls back to a built-in set of six colours.- **The gradient can span the whole page** rather than just the section, which is a separate setting and changes the effect considerably.- **No image is loaded**, so this costs almost nothing compared with a video or photo background.- **Measured with Nexter Blocks Pro deactivated:** this effect disappears completely and the container renders as a plain section, with nothing on the page to say why.

## Limitations

- **Pro only** — measured with Nexter Blocks Pro deactivated, no gradient class or rule is rendered.- **Contrast still has to hold across the whole gradient.** Text sitting where two very different colours meet will be readable in one place and not another.- **Many colours make mud.** Two or three related shades look deliberate; six unrelated ones look like an accident.- **It animates continuously** while the section is on screen.- **For discrete colour steps rather than a blend**, use the [animated colour background](https://nexterwp.com/docs/add-an-animated-color-background-in-a-wordpress-container/) instead.

## Troubleshooting

### I see a gradient but it does not move

The duration may be extremely long, or set to zero. Set it to something in the range of fifteen to thirty seconds.

### I get colours I did not choose

The colour list is empty, so the block is using its built-in fallback set. Add your own colours.

### Nothing renders at all

Check the animated gradient background type is selected and that Nexter Blocks Pro is active — measured, neither the class nor the rule appears without it.

### The angle looks wrong

The angle is in degrees, measured the way CSS does: 0 runs bottom to top, 90 runs left to right.

## Related Docs

- [Add an animated colour background in a container](https://nexterwp.com/docs/add-an-animated-color-background-in-a-wordpress-container/)- [Change background colour on scroll in WordPress](https://nexterwp.com/docs/how-to-change-background-color-on-scroll-in-wordpress/)- [Add a container in WordPress](https://nexterwp.com/docs/add-a-container-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)

## Frequently Asked Questions

**Q: What do I need before adding an animated gradient background to a WordPress container?**
A: Nexter Blocks Pro is the key requirement, because the animated gradient background is a Pro-only effect. The page also says the Container block must be switched on under Nexter > Blocks in your WordPress dashboard, and the container needs content inside it. That matters because the effect is applied to a real Container block, not a standalone background setting. If any of those pieces are missing, the section can render as plain content instead of an animated gradient.

**Q: Why does my animated gradient background stay still instead of moving?**
A: The most common cause is timing. The page says the duration may be extremely long or set to zero, and recommends a range of fifteen to thirty seconds. That range keeps the motion visible without making it feel too fast. Since the animation runs continuously while the section is on screen, an overly long duration can look like it is frozen even though it is technically active.

**Q: Why am I seeing colours I did not choose in the gradient?**
A: An empty colour list triggers the built-in fallback set of six colours. That fallback keeps the block from breaking, but it also means you will see default colours instead of your own palette. Adding your own colours gives you control over how deliberate the gradient feels. The page also notes that too many unrelated colours can look messy, so two or three related shades usually read better than a long random list.

**Q: What should I use for an animated gradient background versus an animated colour background?**
A: Animated gradient backgrounds are for smooth blends between colours, while the animated colour background option is for discrete colour steps rather than a blend. That difference matters because gradients create depth and movement at the same time, while stepped colour changes feel more like a sequence of blocks. Nexter Blocks offers both patterns, so the choice depends on whether you want a blended visual or a sharper transition.

**Q: Does an animated gradient background work if Nexter Blocks Pro is disabled?**
A: The effect disappears completely when Nexter Blocks Pro is deactivated. The page says no gradient class or rule is rendered in that state, so the container falls back to a plain section with nothing on the page explaining why. That makes Pro activation non-negotiable for this feature. If nothing renders at all, the first thing to check is whether the animated gradient background type is selected and Nexter Blocks Pro is active.