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.
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.
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-gradientwith inlinebackground-image: linear-gradient(90deg, …)andanimation-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 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.
