Effects · Gutenberg
Neon Text block for WordPress
Glowing neon tube text effect with animated flicker, multi-color glow layers, animated background scanlines, and multiple neon color presets.
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
Glowing neon tube text effect with animated flicker, multi-color glow layers, animated background scanlines, and multiple neon color presets.
Inspector panels on this block: Text, Neon Color, Custom Colors, Glow Settings, Animation, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “HTML tag” options: H1, H2, H3, H4, p; “Color preset” options: ⚡ Electric Blue, 🔴 Hot Pink, 🟢 Matrix Green, 🟡 Golden Amber, 🟣 Purple Haze; “Flicker mode” options: Soft (gentle breathe), Classic (on/off blink), Broken (random stutter), None; “Broken letter index (-1 = random)” (For "broken" mode: which character appears faulty (-1 = random)).
Where to find it
Gutenberg inserter → Effects → search “Neon Text” (block name `blockenberg/neon-text` in block.json). Style it in the sidebar after insert.
How to use Neon Text block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Neon Text”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Text. Set “Main text”, “Show subtitle”, “Subtitle”, “HTML tag”.
- 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 |
|---|---|
| Main text | Text field in the inspector. block.json default: NEON SIGN. Saved as `text`. |
| Show subtitle | On/off toggle in the inspector. Off by default. Saved as `showSubText`. |
| Subtitle | Text field in the inspector. Saved as `subText`. |
| HTML tag | Select control; the chosen value is saved on the block. Options: H1; H2; H3; H4; p; div. block.json default: h2. Saved as `tag`. |
| Color preset | Select control; the chosen value is saved on the block. Options: ⚡ Electric Blue; 🔴 Hot Pink; 🟢 Matrix Green; 🟡 Golden Amber; 🟣 Purple Haze; 🔵 Ocean Teal; 🌹 Rose Gold; 🟠 Toxic Orange. block.json default: electric-blue. Saved as `preset`. |
| Tube / text color | Color control in the inspector. block.json default: #00d4ff. Saved as `tubeColor`. |
| Inner glow color | Color control in the inspector. block.json default: #00d4ff. Saved as `glowColor`. |
| Outer glow color | Color control in the inspector. block.json default: #0055ff. Saved as `secondGlow`. |
| Custom Colors — Background | Color control in the inspector. block.json default: #0a0a12. Saved as `backgroundColor`. |
| Sign border color | Color control in the inspector. block.json default: #ff0080. Saved as `borderSignColor`. |
| Glow intensity | Numeric range control in the inspector. Range 0.5–8. block.json default: 3. Saved as `glowIntensity`. |
| Glow spread (px) | Numeric range control in the inspector. Range 5–120. block.json default: 40. Saved as `glowSpread`. |
| Show glow floor reflection | On/off toggle in the inspector. On by default. Saved as `showGlowFloor`. |
| Show CRT scanlines overlay | On/off toggle in the inspector. On by default. Saved as `showScanlines`. |
| Show neon sign border | On/off toggle in the inspector. Off by default. Saved as `showBorderSign`. |
| Flicker mode | Select control; the chosen value is saved on the block. Options: Soft (gentle breathe); Classic (on/off blink); Broken (random stutter); None. block.json default: soft. Saved as `flickerMode`. |
| Broken letter index (-1 = random) | Numeric range control in the inspector. For "broken" mode: which character appears faulty (-1 = random). Range -1–20. block.json default: -1. Saved as `flickerLetter`. |
| Vertical padding (px) | Numeric range control in the inspector. Range 0–160. block.json default: 64. Saved as `paddingV`. |
| Horizontal padding (px) | Numeric range control in the inspector. Range 0–160. block.json default: 48. Saved as `paddingH`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–64. block.json default: 16. Saved as `borderRadius`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Glowing neon tube text effect with animated flicker, multi-color glow layers, animated background scanlines, and multiple neon color presets — that is the job of Neon Text, not a generic content block.
- Use it when you need the editor control labeled “Main text”, which exists on this block’s inspector.
- It matches pages about neon, glow, text.
- 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 Neon Text block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Neon Text”. It sits under Effects. After insert, open Text and set “Main text”, “Show subtitle”, “Subtitle”, “HTML tag”.
What makes Neon Text different from other Blockenberg blocks?
Glowing neon tube text effect with animated flicker, multi-color glow layers, animated background scanlines, and multiple neon color presets. Inspector labels on this block include “Main text”, “Show subtitle”, “Subtitle”, “HTML tag”.
Is the Neon Text Gutenberg block free?
Yes. Neon Text ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Neon 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: Text, Neon Color, Custom Colors, Glow Settings).
Related effects blocks
Glitch Text
Eye-catching glitch animation text with chromatic aberration, noise, scanlines, and digital distortion effects.
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.
Matrix Rain
Canvas-rendered Matrix-style digital rain with falling character columns. Fully customizable character set, colors, speed and overlay content.
Spotlight Card
Card with a radial gradient spotlight that follows the mouse cursor on hover.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Gradient Border Card
Card with an animated rotating gradient border — conic-gradient glow effect popular in modern dark UI.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Neon Text from the Gutenberg inserter.