An Animated Mesh Gradient Background is one of the most visually striking ways to add depth and movement to your Elementor designs. With smooth, flowing colors that shift seamlessly, this effect creates a modern, dynamic backdrop that instantly grabs attention. Whether you’re designing a landing page, hero section, or any creative layout, adding this animation can transform static sections into engaging experiences for your visitors.
Step #1: Install and activate Unlimited Elements
Before getting started, you will need to purchase Unlimited Elements Pro from the link below to access the Animated Mesh Gradient Background widget.
Then follow these steps:
Now that you have the plugin installed, it’s time to start using it in your backgrounds.
Step #2: Adding the Animated Mesh Gradient Backgroundwidget to your Elementor website
To add an Animated Mesh Gradient, install the Animated Mesh Gradient Background widget from the Unlimited Elements Background Widgets library.
Step #3: Add an Animated Mesh Gradient Background Widget to an Elementor Page
General Settings
Background Type
Select the type of background animation, such as "Animated Mesh Gradient".
Color 1
Set the first color for the animated gradient.
Color 2
Set the second color for the animated gradient.
Color 3
Set the third color for the animated gradient.
Color 4
Set the fourth color for the animated gradient.
Animation Speed
Adjust the speed of the background animation.
Gradient Wave Amplitude
Set the amplitude of the gradient wave effect.
Animate on Hover
A toggle to enable the animation to occur only on hover.
Static Gradient
A toggle to make the gradient static instead of animated.
Randomized
A toggle that randomizes the gradient on each page reload.
Overflow Hidden
A toggle to enable this option if the border radius is not working on the parent container.
Background Location in Animated Mesh Gradient Background
In Background
Appear behind your content.
In Foreground
Overlay on top of the content.
Site Body Background
Covers the entire page background globally.
Site Body Foreground
Overlay all site content (header to footer).
Layout Background
Restricted to a specific section/widget.
Layout Foreground
Overlay a single section/widget.
Wrapping it Up!
Using the Animated Mesh Gradient Background in Elementor is a simple yet powerful way to give your website a sleek and interactive feel. By blending vibrant colors with fluid animations, you can elevate your design and keep your audience visually engaged. Try experimenting with different gradient styles and color palettes to make your sections stand out and leave a lasting impression.
