An animated color background cycles a container’s background through a short list of solid colors instead of staying on one flat color, adding a subtle living quality to a section.
What It Does
The Container block’s Background Deep Layer includes an Animated Color option that transitions the background smoothly between a list of solid colors, one at a time, on a repeating cycle.
Why It Matters
A single static background color can look identical to every other flat-color block on a page. Cycling smoothly between a small set of colors gives a section a distinct, branded identity and a subtle sense of motion without the visual complexity of a gradient or image background.
What You Get
A Color List of individual solid colors (three by default, expandable with + Add Color), an Animation Duration(s) field for how long each transition takes, and an Animation Delay(s) field for the pause between color changes.
Benefits
- Simpler to set up than the Gradient Animated Color option, since each Color List entry is just a solid color transition rather than a generated gradient.
- Animation Delay(s) lets a color rest for a period before transitioning, rather than constantly shifting.
- Works as a lightweight alternative to a background video or image when the goal is simply a bit of ambient motion.
Capabilities
- Animated Color – the background option itself, selected from Select Background Option.
- Color List – three solid color items by default; + Add Color adds more.
- Animation Duration(s) – how long the transition between two colors takes.
- Animation Delay(s) – the pause between one color change finishing and the next one starting.
How It Works
The block cycles through the Color List in order, transitioning the background from one solid color to the next over the Animation Duration(s), then holding briefly for Animation Delay(s) before starting the next transition, looping back to the first color once the list is exhausted. Unlike Gradient Animated Color, no multi-stop gradient is generated between colors; each transition is a straightforward solid-to-solid blend.
How to Use It
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; add a single color to each.
4. Click + Add Color to add more colors to the cycle.
5. Set the Animation Duration(s) field for how long each color transition takes.
6. Set Animation Delay(s) to add a pause between color changes.
Save and preview the front end to see the background cycle through your colors.
Use Cases
- A brand-color-cycling section background for a landing page hero or footer CTA
- A simple, lightweight alternative to a video background for adding motion to a section
- A seasonal or promotional section where colors should visibly shift to draw attention
Limitations
- Only solid colors go into the Color List; there is no gradient generation here (see Gradient Animated Color for that behavior).
- With only two colors and a short Animation Duration(s), the effect can look like simple flashing rather than a smooth ambient cycle; more colors and a longer duration read more naturally.
- Because it is continuous CSS animation, it keeps running for as long as the section is visible; it is not a one-time or scroll-triggered color change.
Troubleshooting
- The color change looks like an abrupt flash rather than a smooth transition: increase the Animation Duration(s) value so the blend between colors has more time to play out.
- The background feels like it never settles or rests on one color: increase Animation Delay(s) to add a pause between transitions.
- The background does not appear to be cycling at all: confirm at least two different colors are set in the Color List; identical colors will not visibly change.
To explore the gradient version of this background, see Animated Gradient Color Background, or return to the Container overview.
