What is a glitch text effect?
It's a digital-distortion look borrowed from CRT screens, VHS tapes and cyberpunk design. The text duplicates into two colored copies (RGB chromatic aberration) that separate by a few pixels; stronger versions add shaking and clipped slices that jump sideways.
On hover, it's a strong signal that an element is interactive — perfect for bold, tech or gaming brands.
How to add glitch text in Elementor
- Add a native Button widget and write its text.
- Open Advanced → Pro Effects – Buttons.
- Choose Glitch Text.
- Pick the two channel colors, the offset, the intensity and the speed.
- Publish and hover the button.
Settings you can adjust
| Setting | What it does | Default |
|---|---|---|
| Channel A color | First color channel | #00ffff (cyan) |
| Channel B color | Second color channel | #ff00ff (magenta) |
| Offset | Maximum separation between the channels | 3 px |
| Intensity | Subtle (static offset), Medium (offset + shake), Strong (offset + clipped slices) | Medium |
| Glitch speed | Duration of each glitch cycle — lower is more frantic | 0.5 s |
| Disable on mobile | Turn it off on touch devices | Off |
Presets
- Classic vaporwave: Subtle, offset 5 px, cyan + magenta.
- Broken signal: Strong, offset 4 px, speed 0.3 s.
Where it fits
- Gaming, esports and tech landing pages.
- Music, events and nightlife sites.
- A single "enter" or call-to-action button on an otherwise calm design — contrast makes it pop.
How it's built
The effect is mostly CSS — color channels with mix-blend-mode and slices with clip-path — with a small script to set it up, about 7 KB before minification. It respects the visitor's reduced motion setting.
Related effects
- Sparkle Button — stars burst out on hover.
- Magnetic Button — the button follows the cursor.
- Text Loop — infinite scrolling text.
