In this guide, we will show you how to use the “Animated Mesh Gradient Background widget” on your Elementor website. The Animated Mesh Gradient Background widget adds a smooth, colorful gradient animation to your sections, creating a dynamic and fluid backdrop. Perfect for giving your pages a modern, eye-catching feel, this widget enhances visual appeal while keeping your design fresh and engaging.
Let’s explore the customization options available in the “Animated Mesh Gradient Background widget” for Elementor below.
Elementor Animated Mesh Gradient Background Tutorial Video (Step by Step Guide)
Add an Animated Mesh Gradient Background to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
Add an Animated Mesh Gradient Background Widget to an Elementor Page
Elementor Animated Mesh Gradient Background Widget 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.
Animated Mesh Gradient Background Widget Design Examples For Elementor
Here are some live use cases for the Animated Mesh Gradient Background widget.
Animated Mesh Gradient Background.
Animated Mesh Gradient For Product.
Thank you for using the Animated Mesh Gradient Background widget for Elementor! This visually captivating tool adds smooth, colorful gradients that flow and shift across your sections, creating a dynamic and modern backdrop. Designed to enhance your site’s visual appeal and keep your layouts fresh, it offers customizable options to match your design seamlessly. For support or inspiration, feel free to get in touch or explore our demo.