Creative · Elementor
Interactive Gradient Mesh widget for Elementor
Interactive Gradient Mesh is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Interactive Gradient Mesh” in the Elementor panel.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
Interactive Gradient Mesh is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Interactive Gradient Mesh” in the Elementor panel.
Interactive Gradient Mesh Widget (Free).
render() writes HTML data attributes: data-animate, data-engine, data-export-css, data-mesh, data-motion.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Interactive Gradient Mesh”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Preset”, “Base Color”, “Engine”, “Height”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs Interactive Gradient Mesh.
- A layout in the motion, hover effects, buttons, and visual treatments group.
- Search the panel for “Interactive Gradient Mesh” after King Addons is active.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Preset | The chosen value is read in render() and applied on the front end. |
| General — Base Color | Overrides the preset base color. |
| General — Engine | The chosen value is read in render() and applied on the front end. Options: Auto; CSS Gradients; Canvas 2D. |
| General — Height | Writes CSS `height` onto the widget’s front-end markup. (min 120, max 1200). |
| General — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| General — Overlay Alignment | Options: Left; Center; Right. |
| General — Overlay Vertical Align | Options: Top; Center; Bottom. |
| General — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Overlay Content — Show Overlay | Switcher inspector control (`kng_mesh_show_overlay`). |
| Overlay Content — Overlay Source | The chosen value is read in render() and applied on the front end. Options: Basic Content; Elementor Template. |
| Overlay Content — Choose Template | The chosen value is read in render() and applied on the front end. |
| Overlay Content — Title | Saved on the widget and consumed in render(). |
| Overlay Content — Subtitle | Saved on the widget and consumed in render(). |
| Overlay Content — Text | Saved on the widget and consumed in render(). |
| Overlay Content — Button Text | Saved on the widget and consumed in render(). |
| Overlay Content — Button Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Animation — Enable Animation | Switcher inspector control (`kng_mesh_enable_animation`). |
| Animation — Speed | Spacing/size control (min 0, max 100). |
| Animation — Motion Style | The chosen value is read in render() and applied on the front end. Options: Smooth Drift; Slow Pulse; Calm Wave. |
| Baseline — Saturation | Spacing/size control (min 50, max 160). |
| Baseline — Contrast | Spacing/size control (min 70, max 160). |
| Baseline — Blur | Spacing/size control (min 0, max 60). |
| Baseline — Noise Layer | Switcher inspector control (`kng_mesh_noise`). |
| Baseline — Noise Opacity | Spacing/size control (min 0, max 0.4). |
| Container — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-gradient-mesh`. |
| Container — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-gradient-mesh`. |
| Overlay Style — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-gradient-mesh__content`. |
| Overlay Style — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-gradient-mesh__content`. |
| Overlay Style — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-gradient-mesh__content`. |
| Overlay Style — Content Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Overlay Style — Content Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Overlay Style — Content Width | Writes CSS `max-width` onto the widget’s front-end markup. (min 240, max 960). |
| Overlay Style — Content Gap | Writes CSS `gap` onto the widget’s front-end markup. (min 0, max 40). |
| Overlay Style — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-gradient-mesh__title`. |
| Overlay Style — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Overlay Style — Typography (Kng Mesh Subtitle Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-gradient-mesh__subtitle`. |
| Overlay Style — Subtitle Color | Writes CSS `color` onto the widget’s front-end markup. |
| Overlay Style — Typography (Kng Mesh Text Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-gradient-mesh__text`. |
| Overlay Style — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Overlay Style — Button Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Overlay Style — Typography (Kng Mesh Button Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-gradient-mesh__button`. |
| Overlay Style — Button Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Overlay Style — Button Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Overlay Style — Border (Kng Mesh Button Border) | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-gradient-mesh__button`. |
| Overlay Style — Hover Text Color | Writes CSS (button, color) onto the widget’s front-end markup. |
| Overlay Style — Hover Background | Writes CSS (button, background-color) onto the widget’s front-end markup. |
| Overlay Style — Hover Border Color | Writes CSS (button, border-color) onto the widget’s front-end markup. |
| Overlay Style — Button Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 50). |
| Overlay Style — Box Shadow (Kng Mesh Button Shadow) | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-gradient-mesh__button`. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Interactive Gradient Mesh actually change on the page?
Interactive Gradient Mesh is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Interactive Gradient Mesh” in the Elementor panel. Inspector labels from this widget’s PHP include “Preset”, “Base Color”, “Engine”, “Height”.
How do I add Interactive Gradient Mesh in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Interactive Gradient Mesh”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related creative widgets
3D Holographic Card
A 3D card with holographic sheen, rim light, and parallax — one decorative object, not a post loop.
Auto-Scrolling Text
A CSS marquee for a short phrase or logo strip. Keep the text short; this is not a blog loop.
Content Flip Box
A card that flips or hover-reveals a second face — icon/title on the front, detail on the back.
Magnetic Buttons
Buttons that ease toward the cursor on hover. Use on a few CTAs, not every link.
Spotlight Reveal
A spotlight that follows the pointer and reveals the layer underneath — a hover effect, not a content widget.
Styled Text Builder
One text block with per-span styling and motion, instead of several heading widgets.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Interactive Gradient Mesh after you activate it.