How to Add an Animated Gradient Background in Elementor?

Updated onApril 9, 2026By

Key Takeaways

  • Row Background widget from The Plus Addons for Elementor allows users to add an animated gradient background to a container or section.
  • Users can select multiple colors for the gradient by adding colors in the Select Multiple Colors section of the Row Background widget.
  • Enabling the Full Page Background toggle makes the animated gradient background cover the entire page, best achieved with the Elementor Canvas template.
Table Of Content

Are you looking to add an animated gradient background in Elementor? Adding an animated gradient background can add a dynamic and eye-catching element to your website.

With the Row Background widget from The Plus Addons for Elementor, you can easily add an animated gradient background to a container or section in Elementor.

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, make sure its installed & activated to enjoy all its powers.

LIVE WIDGET LINK

To do this, add the Row Background widget to the container or section you want to add the animated gradient background and follow the steps –

1. Select Gradient Animate Color from the Select Option dropdown, under the Deep Layer tab.

Row background gradient animated color how to add an animated gradient background in elementor? From the plus addons for elementor

2. Then you have to add colors in the Select Multiple Colors section. By default, you’ll find three repeater items, open the first one.

3. In the Color section add your first color.

Note: The rest of the options are for the On Scroll Background Animation option.

4. Then open the second item and add the second color in the Color section. 

Similarly, you can add different colors to the other items.

You can click on the + Add Item button to add more colors.

Now based on your selected colors it will automatically create gradient colors.

In the Animation Duration field, you can set the color transition duration.

Then from the Animate Rotate Color field, you can change the gradient color angle.

By enabling the Full Page Background toggle, you can make the animated gradient background a full page.

Note: For the best full-page animated gradient background result you should use the Elementor Canvas template.

If the full page background isn’t working properly you can select Relative from the Position dropdown to fix the issue.

Now you’ll see a beautiful animated gradient background color smoothly changing from one color to another.

For creating a simple animated gradient background you don’t need to add any background in the other layers.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if my animated gradient background isn't displaying correctly?

If the animated gradient background isn't working properly, try selecting 'Relative' from the Position dropdown. This adjustment can help resolve issues with the full-page background not appearing as intended. Additionally, for optimal results, use the Elementor Canvas template, which is specifically designed for full-page backgrounds.

Can I use the Row Background widget for other types of backgrounds?

The Row Background widget from The Plus Addons for Elementor is specifically designed for adding animated gradient backgrounds. While you can create various color combinations, the widget's primary function is to enhance sections with animated gradients. For other background types, consider exploring different widgets within The Plus Addons for Elementor.

What are the best settings for creating a full-page animated gradient background?

For the best full-page animated gradient background, enable the 'Full Page Background' toggle and use the Elementor Canvas template. This combination ensures that the gradient transitions display correctly across the entire page. If you encounter issues, adjusting the Position dropdown to 'Relative' can also help.

How do I adjust the speed of the color transitions in my gradient background?

You can adjust the speed of the color transitions by modifying the 'Animation Duration' field in the Row Background widget settings. This setting controls how quickly the colors change, allowing you to create a more dynamic or subtle effect based on your design preference.

What happens if I don't add any background to the other layers when using the Row Background widget?

If you don't add any background to the other layers while using the Row Background widget, you will still achieve a simple animated gradient background. The widget is designed to create a visually appealing effect with just the gradient settings, making it easy to implement without additional layers.

How many colors can I add to my animated gradient background?

You can add multiple colors to your animated gradient background by using the 'Select Multiple Colors' section in the Row Background widget. By default, there are three repeater items available, but you can click the '+ Add Item' button to add more colors, allowing for a richer gradient effect.

Last reviewed: April 9, 2026

Related Docs