Effects · Gutenberg
Gradient Blob block for WordPress
Full-width section with animated CSS gradient blobs as background and InnerBlocks for content.
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
Full-width section with animated CSS gradient blobs as background and InnerBlocks for content.
Inspector panels on this block: Blobs, Layout. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Effects → search “Gradient Blob” (block name `blockenberg/gradient-blob` in block.json). Style it in the sidebar after insert.
How to use Gradient Blob block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Gradient Blob”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Blobs. Set “Number of blobs”, “Blob size (%)”, “Opacity (%)”, “Blur (px)”.
- Check the published page. The view script reads HTML data attributes: data-paused, data-speed. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Number of blobs | Numeric range control in the inspector. Range 1–5. block.json default: 3. Saved as `numBlobs`. |
| Blob size (%) | Numeric range control in the inspector. Range 10–120. block.json default: 60. Saved as `blobSize`. |
| Opacity (%) | Numeric range control in the inspector. Range 5–100. block.json default: 60. Saved as `blobOpacity`. |
| Blur (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `blobBlur`. |
| Animation speed (s) | Numeric range control in the inspector. Range 3–40. block.json default: 10. Saved as `animSpeed`. |
| Pause animation | On/off toggle in the inspector. Off by default. Saved as `paused`. |
| Min height (px) | Numeric range control in the inspector. Range 100–1200. block.json default: 500. Saved as `minHeight`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingBottom`. |
| Content max width (px) | Numeric range control in the inspector. Range 200–1400. block.json default: 720. Saved as `contentMaxWidth`. |
| Center content | On/off toggle in the inspector. On by default. Saved as `centerContent`. |
| Blob color 1 | Color control in the inspector. block.json default: #c084fc. Saved as `color1`. |
| Blob color 2 | Color control in the inspector. block.json default: #818cf8. Saved as `color2`. |
| Blob color 3 | Color control in the inspector. block.json default: #f0abfc. Saved as `color3`. |
| Background color | Color control in the inspector. block.json default: #faf5ff. Saved as `bgColor`. |
| Text color | Color control in the inspector. Saved as `textColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-paused, data-speed.
When this is the right block
- Full-width section with animated CSS gradient blobs as background and InnerBlocks for content — that is the job of Gradient Blob, not a generic content block.
- Use it when you need the editor control labeled “Number of blobs”, which exists on this block’s inspector.
- It matches pages about blob, gradient, animated.
- 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 Gradient Blob block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Gradient Blob”. It sits under Effects. After insert, open Blobs and set “Number of blobs”, “Blob size (%)”, “Opacity (%)”, “Blur (px)”.
What makes Gradient Blob different from other Blockenberg blocks?
Full-width section with animated CSS gradient blobs as background and InnerBlocks for content. Inspector labels on this block include “Number of blobs”, “Blob size (%)”, “Opacity (%)”, “Blur (px)”.
Is the Gradient Blob Gutenberg block free?
Yes. Gradient Blob ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Gradient Blob 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: Blobs, Layout).
Related effects blocks
Gradient Border Card
Card with an animated rotating gradient border — conic-gradient glow effect popular in modern dark UI.
Gradient Text
Heading or paragraph text with a rich gradient fill, optional outline, shadow, and CSS animation.
Parallax Section
A full-width content section with a background image that scrolls at a different speed for a depth parallax effect.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Gradient Text Animator
Animated gradient-filled text with multiple animation modes — shift, pulse, wave, rainbow, and reveal.
Matrix Rain
Canvas-rendered Matrix-style digital rain with falling character columns. Fully customizable character set, colors, speed and overlay content.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Gradient Blob from the Gutenberg inserter.