Effects · Gutenberg
Gradient Text Animator block for WordPress
Animated gradient-filled text with multiple animation modes — shift, pulse, wave, rainbow, and reveal.
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
Animated gradient-filled text with multiple animation modes — shift, pulse, wave, rainbow, and reveal.
Inspector panels on this block: Text Content, Animation, Glow Effect, Background, Gradient Colors, Color Stops. 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; “Animation Type” options: Shift — gradient slides, Pulse — gradient breathes, Wave — per-character wave, Rainbow — full spectrum cycle, Reveal — sweeping spotlight; “Direction” options: Horizontal →, Diagonal ↘, Radial ○.
Where to find it
Gutenberg inserter → Effects → search “Gradient Text Animator” (block name `blockenberg/gradient-text-animator` in block.json). Style it in the sidebar after insert.
How to use Gradient Text Animator block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Gradient Text Animator”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Text Content. Set “Text Content — Text”, “HTML Tag”, “Text Align”, “Typography — Text”.
- 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 |
|---|---|
| Text Content — Text | Multiline text field in the inspector. block.json default: Animated Gradient Text. Saved as `text`. |
| HTML Tag | Select control; the chosen value is saved on the block. Options: H1; H2; H3; H4; H5; H6; P (paragraph); 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`. |
| Typography — Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoText`. |
| Animation Type | Select control; the chosen value is saved on the block. Options: Shift — gradient slides; Pulse — gradient breathes; Wave — per-character wave; Rainbow — full spectrum cycle; Reveal — sweeping spotlight; Glitch — RGB displacement. block.json default: shift. Saved as `animationType`. |
| Speed (seconds per cycle) | Numeric range control in the inspector. Range 0.5–20. block.json default: 4. Saved as `animationSpeed`. |
| Direction | Select control; the chosen value is saved on the block. Options: Horizontal →; Diagonal ↘; Radial ○. block.json default: horizontal. Saved as `direction`. |
| Pause on Hover | On/off toggle in the inspector. Off by default. Saved as `pauseOnHover`. |
| Reverse on Hover | On/off toggle in the inspector. Off by default. Saved as `reverseOnHover`. |
| Enable Glow | On/off toggle in the inspector. Off by default. Saved as `glowEffect`. |
| Glow Blur (px) | Numeric range control in the inspector. Range 4–80. block.json default: 20. Saved as `glowBlur`. |
| Glow Opacity | Numeric range control in the inspector. Range 0.1–1. block.json default: 0.6. Saved as `glowOpacity`. |
| Show Background | On/off toggle in the inspector. Off by default. Saved as `showBg`. |
| Padding Vertical (px) | Numeric range control in the inspector. Range 0–120. block.json default: 24. Saved as `paddingV`. |
| Padding Horizontal (px) | Numeric range control in the inspector. Range 0–120. block.json default: 24. Saved as `paddingH`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–60. block.json default: 0. Saved as `borderRadius`. |
| Color 1 | Color control in the inspector. block.json default: #f59e0b. Saved as `color1`. |
| Color 2 | Color control in the inspector. block.json default: #ec4899. Saved as `color2`. |
| Color 3 (3+ stops) | Color control in the inspector. block.json default: #8b5cf6. Saved as `color3`. |
| Color 4 (4 stops) | Color control in the inspector. block.json default: #06b6d4. Saved as `color4`. |
| Background Color | Color control in the inspector. block.json default: #0f172a. Saved as `bgColor`. |
| Number of Color Stops | Numeric range control in the inspector. Range 2–4. block.json default: 4. Saved as `stopCount`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Animated gradient-filled text with multiple animation modes — shift, pulse, wave, rainbow, and reveal — that is the job of Gradient Text Animator, not a generic content block.
- Use it when you need the editor control labeled “Text Content — Text”, which exists on this block’s inspector.
- It matches pages about gradient, text, animation.
- 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 Animator block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Gradient Text Animator”. It sits under Effects. After insert, open Text Content and set “Text Content — Text”, “HTML Tag”, “Text Align”, “Typography — Text”.
What makes Gradient Text Animator different from other Blockenberg blocks?
Animated gradient-filled text with multiple animation modes — shift, pulse, wave, rainbow, and reveal. Inspector labels on this block include “Text Content — Text”, “HTML Tag”, “Text Align”, “Typography — Text”.
Is the Gradient Text Animator Gutenberg block free?
Yes. Gradient Text Animator ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Gradient Text Animator 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: Text Content, Animation, Glow Effect, Background).
Related effects blocks
Gradient Text
Heading or paragraph text with a rich gradient fill, optional outline, shadow, and CSS animation.
Glitch Text
Eye-catching glitch animation text with chromatic aberration, noise, scanlines, and digital distortion effects.
Gradient Border Card
Card with an animated rotating gradient border — conic-gradient glow effect popular in modern dark UI.
Handwriting Text
SVG text that animates in as if being handwritten — stroke reveal effect triggered on scroll or load.
Kinetic Text
Text characters that scatter outward and snap back on hover with smooth physics animation.
Morphing Text
Headline that smoothly morphs between multiple words with blur, crossfade, slide, or typewriter transitions.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Gradient Text Animator from the Gutenberg inserter.