An animated gradient background continuously blends between multiple colors instead of showing one flat static gradient, giving a section a modern, living feel.
What It Does
The Container block’s Background Deep Layer includes a Gradient Animated Color option that auto-generates and continuously cycles a multi-stop gradient from a short list of colors you provide.
Why It Matters
A flat single-color or static gradient section can feel identical to every other block on the page. An animated, shifting gradient gives hero sections, CTAs, and pricing highlights a distinct visual identity without needing a photo, illustration, or video asset to load.
What You Get
A Color List where each item is a single color the block turns into gradient stops automatically, an Animation Duration field, an Animate Rotate Color field for the gradient’s angle, and a Full Page Background toggle with a Position option for stretching the effect beyond the container itself.
Benefits
- You only pick plain colors; the block auto-generates the actual gradient stops, so there is no manual CSS gradient syntax to write.
- The + Add Gradient button supports more than the default three colors when a longer color cycle is wanted.
- Full Page Background lets one section’s animated gradient serve as a page-wide backdrop rather than staying boxed to that section.
Capabilities
- Gradient Animated Color – the background option itself, selected from Select Background Option.
- Color List – three color items by default; each single color becomes a gradient stop. + Add Gradient adds more.
- Animation Duration(s) – controls how long the transition from one color to the next takes.
- Animate Rotate Color – sets the angle the gradient travels across.
- Full Page Background with Position – extends the animated gradient to behave as a fixed full-page div rather than staying scoped to the container.
How It Works
Each entry in the Color List is a plain color value; the block itself builds the multi-stop gradient between them rather than requiring a pre-built CSS gradient string. Animation Duration controls the transition timing between color stops, and Animate Rotate Color sets the gradient’s direction independently of that timing. Enabling Full Page Background and choosing a Position detaches the rendered gradient from the container’s own box so it can sit behind the whole viewport instead of just that block.
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 Gradient 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. Based on these colors, the block auto-generates the gradient.
4. Click + Add Gradient to add more colors to the cycle.
5. Set the Animation Duration(s) field for how long each color transition takes.
6. Set Animate Rotate Color for the gradient’s angle.
7. Enable Full Page Background if the gradient should extend beyond the section, then choose a Position for the full-page div.
Save and preview the front end to see the animated gradient in motion.
Use Cases
- A SaaS landing page hero that needs visual energy without a photo or video asset
- A pricing or CTA section where a shifting brand-color gradient reinforces the call to action
- A Full Page Background gradient used as an ambient backdrop behind a login or coming-soon page
Limitations
- Only single flat colors go into the Color List; the block does not accept a pre-built multi-stop gradient string as one list item.
- Because the gradient animates continuously, it adds constant CSS animation to the page; using it on many stacked sections at once can compete visually and add render overhead.
- Full Page Background changes the element’s positioning behavior, so it should be tested against the rest of the page’s layout (sticky headers, other fixed elements) rather than assumed to always sit cleanly behind content.
Troubleshooting
- The gradient only shows a hard cut between colors instead of a smooth blend: increase the Animation Duration(s) value; a very short duration can read as an abrupt jump rather than a gradient transition.
- The background does not look like a true gradient, just a shifting solid color: confirm at least two distinct colors are set in the Color List; a single repeated color will not visibly cycle.
- Enabling Full Page Background changes the section’s stacking relative to other fixed or sticky elements: this is a known interaction, since Full Page Background changes how the element is positioned on the page; adjust the Position option and re-check against any sticky header or footer on the same page.
To explore the non-animated version of this background, see Animated Color Background, or return to the Container overview.
