An animated gradient slowly moves its colours across the background, which works well behind hero sections.
The Row Background widget from The Plus Addons for Elementor builds the gradient from your colours and keeps it moving, either inside one container or behind the whole page.
To check the complete feature overview documentation of The Plus Addons for Elementor Row Background widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Row Background widget is only available in The Plus Addons for Elementor Pro.
- Widget to enable: Row Background, switched on under The Plus Addons > Widgets.
- Where to put it: drop the widget inside the container (or classic section) that should get the background. It draws nothing of its own; the background fills that container.
Steps
- Add the Row Background widget to the container and open Content > Deep Layer.
- Set Select Option to Gradient Animate Color.
- In Select Multiple Colors, set a Color for each item. Use + Add Item for more colours.
- Set Animation Duration (1 to 30 seconds, default 15) and Animate Rotate Color (the gradient angle, default 120).
- To cover the whole page, turn on Full Page Background and set Position to Relative.
The recording below shows these steps in the editor, followed by a short demo of the result.
Settings
| Setting | What it does | Default |
|---|---|---|
| Select Multiple Colors | The colours of the gradient, in order. | 3 colours |
| Animation Duration | Length of one animation cycle, in seconds. | 15 |
| Animate Rotate Color | Angle of the gradient, in degrees. | 120 |
| Full Page Background | Moves the gradient behind the whole page instead of the container. | Off |
| Position | Inherit or Relative. Use Relative with Full Page Background. | Inherit |
How It Behaves
- The gradient is drawn much larger than the container and slides back and forth, so the colours drift across it. With 4 colours and a 4-second duration the movement was clearly visible.
- With Full Page Background on, the gradient is placed behind the whole page, not just the container. The panel recommends the Elementor Canvas page layout for this.
Limitations
- With Full Page Background and Position left on Inherit, the gradient covered only the first screen of the page in our test (900 px of an 1800 px page). Set Position to Relative to cover the whole page.
Troubleshooting
The full-page gradient stops halfway down the page
Set Position to Relative.
The gradient moves too slowly
Lower Animation Duration.
