Effects · Gutenberg
Interactive Gradient Mesh block for WordPress
A mouse-reactive multi-colour gradient mesh background with optional heading and CTA overlay.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A mouse-reactive multi-colour gradient mesh background with optional heading and CTA overlay.
Inspector panels on this block: Mesh, Container, Content Overlay. Those titles come from index.js, not from a shared template.
Behavior controls: “Content Align” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Effects → search “Interactive Gradient Mesh” (block name `blockenberg/interactive-gradient-mesh` in block.json). Style it in the sidebar after insert.
How to use Interactive Gradient Mesh block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Interactive Gradient Mesh”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Mesh. Set “Blob Count”, “Blob Size (% of container)”, “Blur Amount (px)”, “Blend Mode”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Blob Count | Numeric range control in the inspector. Range 2–10. block.json default: 5. Saved as `blobCount`. |
| Blob Size (% of container) | Numeric range control in the inspector. Range 20–100. block.json default: 55. Saved as `blobSize`. |
| Blur Amount (px) | Numeric range control in the inspector. Range 20–200. block.json default: 80. Saved as `blurAmount`. |
| Blend Mode | Select control; the chosen value is saved on the block. block.json default: screen. Saved as `blendMode`. |
| Mouse Influence (px) | Numeric range control in the inspector. Range 0–100. block.json default: 30. Saved as `mouseInfluence`. |
| Auto Animate | On/off toggle in the inspector. On by default. Saved as `autoAnimate`. |
| Animate Speed | Numeric range control in the inspector. Range 0.1–3. block.json default: 0.6. Saved as `animateSpeed`. |
| Height (px) | Numeric range control in the inspector. Range 120–900. block.json default: 480. Saved as `height`. |
| Base BG (pick via color panel) | Numeric range control in the inspector. Range 0–0. |
| Show Content | On/off toggle in the inspector. On by default. Saved as `showContent`. |
| Heading | Text field in the inspector. block.json default: Beautiful Gradients. Saved as `heading`. |
| Subheading | Text field in the inspector. block.json default: Move your mouse to interact. Saved as `subheading`. |
| CTA Button Text | Text field in the inspector. block.json default: Get Started. Saved as `ctaText`. |
| CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| CTA Radius (px) | Numeric range control in the inspector. Range 0–100. block.json default: 100. Saved as `ctaRadius`. |
| Content Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `contentAlign`. |
| CTA Size (px) | Numeric range control in the inspector. Range 10–24. block.json default: 15. Saved as `ctaSize`. |
| Base BG | Color control in the inspector. block.json default: #0f172a. Saved as `baseBg`. |
| Heading | Color control in the inspector. block.json default: #ffffff. Saved as `headingColor`. |
| Subheading | Color control in the inspector. block.json default: rgba(255,255,255,0.75). Saved as `subheadingColor`. |
| CTA BG | Color control in the inspector. block.json default: #ffffff. Saved as `ctaBg`. |
| CTA Text | Color control in the inspector. block.json default: #0f172a. Saved as `ctaColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- Drawing happens on a canvas element after the page loads.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- A mouse-reactive multi-colour gradient mesh background with optional heading and CTA overlay — that is the job of Interactive Gradient Mesh, not a generic content block.
- Use it when you need the editor control labeled “Blob Count”, which exists on this block’s inspector.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Interactive Gradient Mesh block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Interactive Gradient Mesh”. It sits under Effects. After insert, open Mesh and set “Blob Count”, “Blob Size (% of container)”, “Blur Amount (px)”, “Blend Mode”.
What makes Interactive Gradient Mesh different from other Blockenberg blocks?
A mouse-reactive multi-colour gradient mesh background with optional heading and CTA overlay. Inspector labels on this block include “Blob Count”, “Blob Size (% of container)”, “Blur Amount (px)”, “Blend Mode”.
Is the Interactive Gradient Mesh Gutenberg block free?
Yes. Interactive Gradient Mesh ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Interactive Gradient Mesh to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Mesh, Container, Content Overlay).
Related effects blocks
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Confetti Button
A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Interactive Gradient Mesh from the Gutenberg inserter.