Animated gradient backgrounds for Elementor sections and containers, with your own colours, angle and animation speed.
Elevate your Elementor website design with stunning animated gradient backgrounds that captivate visitors.
Boost your landing page performance with mesmerizing animated gradient backgrounds that instantly grab attention.
Keep pace with the latest web design trends using this versatile animated gradient background widget for Elementor.
Gradient Background is a colourful background that has its colour gradually blended from one shade to the other.
The gradient can be linear or radial.
Straight answers about what this one does, where it fits in a real build, and what it costs you to ship.
Read the documentation for this one, or write to us — a human answers inside a business day.
It arrives as an Animated Gradient Background panel section on elements you already have, not as a widget you drag in. Sky Addons for Elementor adds it to the Style tab of any section, container or column, and to the Advanced tab of every individual widget, so you switch it on exactly where you want the motion.
No. It runs on free Elementor, and the enable switch, colour list, speed, opacity and blend mode all ship in the free Sky Addons plugin. Only Direction, which chooses between left-to-right, diagonal, top-to-bottom and radial, is reserved for Sky Addons Pro; without Pro the gradient travels left to right.
Yes. Each row of the Colors list takes a Start, Mid and End colour, and the Sky Addons extension cycles through every row you add. Transition Speed runs from 1,000 to 10,000 milliseconds and defaults to 7,000, so a three-colour blend can drift slowly or snap between states.
Yes. Picking from the Global tab stores a palette reference instead of a hex value, and the extension resolves that reference to the live CSS variable before it draws. Change the colour once in Site Settings and every animated gradient built on it updates with no re-editing.
Elementor’s gradient is a static CSS fill that never moves. Sky Addons paints an animated canvas layer inside the element instead, morphing between every colour pair in your list on a timer. The element keeps its own Elementor background underneath, so the two layer rather than replace each other.
Yes. The canvas sits above the element’s own background, and the Blend Mode select offers ten CSS modes — multiply, screen, overlay, darken, lighten, colour dodge, saturation, colour and luminosity, alongside normal. Pair one with the Opacity slider, which runs from 0.1 to 1, to tint a photo rather than bury it.
No. Sky Addons inserts the canvas as the first child of the element, pinned to all four edges with pointer events disabled, so buttons and links above it stay clickable. If it still lands in front of something, the Z-index field in the same panel section moves it behind.
Because the animation engine needs every gradient in the set to carry the same number of stops. If one row of the Colors list has a Mid colour and another does not, the extension quietly falls back to start-to-end for all of them. Give every row a Mid colour, or leave it empty on all of them.
Not from this panel section — the Enable switch is a single setting, not a responsive one, so a gradient set for desktop also animates on phones. Use Elementor’s own Hide On Mobile control on the element, or rely on Pause When Not Visible to keep off-screen sections idle.
It throttles itself by default. Pause When Not Visible is switched on out of the box, so the animation stops while the element is off-screen and resumes when it scrolls back into view. Loop Count freezes it after a set number of cycles, or stays at 0 for an endless loop.
