Effects · Gutenberg
Gradient Text block for WordPress
Heading or paragraph text with a rich gradient fill, optional outline, shadow, and CSS animation.
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
Heading or paragraph text with a rich gradient fill, optional outline, shadow, and CSS animation.
Inspector panels on this block: General, Gradient, Outline & Shadow, Subtext. Those titles come from index.js, not from a shared template.
Behavior controls: “HTML Tag” options: H1, H2, H3, H4, H5; “Text Align” options: Left, Center, Right.
Gradient Text has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Effects → search “Gradient Text” (block name `blockenberg/text-gradient` in block.json). Style it in the sidebar after insert.
How to use Gradient Text block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Gradient Text”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open General. Set “HTML Tag”, “Text Align”, “Padding (px)”, “Gradient Angle °”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| HTML Tag | Select control; the chosen value is saved on the block. Options: H1; H2; H3; H4; H5; H6; p; span / div. block.json default: h2. Saved as `tag`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Padding (px) | Numeric range control in the inspector. Range 0–60. block.json default: 0. Saved as `padding`. |
| Gradient Angle ° | Numeric range control in the inspector. Range 0–360. block.json default: 135. Saved as `gradientAngle`. |
| Use 3rd Color Stop | On/off toggle in the inspector. Off by default. Saved as `useColor3`. |
| Animate Gradient | On/off toggle in the inspector. Off by default. Saved as `animate`. |
| Animation Speed (s) | Numeric range control in the inspector. Range 1–20. block.json default: 4. Saved as `animationSpeed`. |
| Text Outline | On/off toggle in the inspector. Off by default. Saved as `showOutline`. |
| Outline Width (px) | Numeric range control in the inspector. Range 1–8. block.json default: 2. Saved as `outlineWidth`. |
| Drop Shadow | On/off toggle in the inspector. Off by default. Saved as `showShadow`. |
| Shadow X (px) | Numeric range control in the inspector. Range -20–20. block.json default: 2. Saved as `shadowX`. |
| Shadow Y (px) | Numeric range control in the inspector. Range -20–20. block.json default: 4. Saved as `shadowY`. |
| Shadow Blur (px) | Numeric range control in the inspector. Range 0–60. block.json default: 12. Saved as `shadowBlur`. |
| Show Subtext | On/off toggle in the inspector. Off by default. Saved as `showSubtext`. |
| Color 1 | Color control in the inspector. block.json default: #6c3fb5. Saved as `color1`. |
| Color 2 | Color control in the inspector. block.json default: #ec4899. Saved as `color2`. |
| Color 3 (mid) | Color control in the inspector. block.json default: #f59e0b. Saved as `color3`. |
| Outline Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `outlineColor`. |
| Shadow Color | Color control in the inspector. block.json default: rgba(108,63,181,0.35). Saved as `shadowColor`. |
| Subtext Color | Color control in the inspector. block.json default: #6b7280. Saved as `subtextColor`. |
When this is the right block
- Heading or paragraph text with a rich gradient fill, optional outline, shadow, and CSS animation — that is the job of Gradient Text, not a generic content block.
- Use it when you need the editor control labeled “HTML Tag”, which exists on this block’s inspector.
- It matches pages about gradient, text, heading.
- 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 Text block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Gradient Text”. It sits under Effects. After insert, open General and set “HTML Tag”, “Text Align”, “Padding (px)”, “Gradient Angle °”.
What makes Gradient Text different from other Blockenberg blocks?
Heading or paragraph text with a rich gradient fill, optional outline, shadow, and CSS animation. Inspector labels on this block include “HTML Tag”, “Text Align”, “Padding (px)”, “Gradient Angle °”.
Is the Gradient Text Gutenberg block free?
Yes. Gradient Text ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Gradient Text 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: General, Gradient, Outline & Shadow, Subtext).
Related effects blocks
Gradient Text Animator
Animated gradient-filled text with multiple animation modes — shift, pulse, wave, rainbow, and reveal.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Gradient Blob
Full-width section with animated CSS gradient blobs as background and InnerBlocks for content.
Gradient Border Card
Card with an animated rotating gradient border — conic-gradient glow effect popular in modern dark UI.
Text Path
Render text along a curved SVG path — arc, wave, circle or S-curve.
Text Stroke
Large outlined/hollow text using CSS text-stroke with hover fill, gradient, and animation options.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Gradient Text from the Gutenberg inserter.