How to set up and style the Animated Gradient extension in Elementor.
Animated Gradient gives a container, section or column a gradient of two to four colors that drifts slowly back and forth. You set the colors, the angle and how long one cycle takes. It is made with CSS only, so no script runs for it.
Part of: Bright Addons Pro.
These options are in the Advanced tab of the element.
| Option | What it does |
|---|---|
| Animated Gradient | Switches the moving gradient on for this container. |
| First Color | The first color of the gradient. |
| Second Color | The second color of the gradient. |
| Third Color | An optional third color. When it is empty the first color is used again. |
| Fourth Color | An optional fourth color. When it is empty the second color is used again. |
| Angle | The direction of the gradient in degrees. The default is 120. |
| One Cycle Takes (seconds) | The time for one full move there and back, from 2 to 120 seconds. The default is 14. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $16 a year, with a 14-day money-back guarantee.
The element probably has its own background. Set the background type of the element to None so the gradient is not covered.
No. Two colors are enough. Empty third and fourth colors repeat the first and second.
It uses a CSS animation and no script. The small stylesheet for it loads only on pages where a container uses the gradient.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide