What the glitch text generator does
The glitch effect makes text look like a corrupted video signal: colour channels split into red and cyan ghosts, horizontal slices jump sideways, and the whole thing flickers. It is a staple of tech, gaming and music branding, hero headings, 404 pages and error states. This generator builds it in pure CSS from your text — with controls for colours, intensity and speed — and gives you the HTML and keyframes to paste. Runs in your browser.
How the effect is built
<h1 class="glitch" data-text="SYSTEM FAILURE">SYSTEM FAILURE</h1>
.glitch { position: relative; color: #fff; }
.glitch::before, .glitch::after {
content: attr(data-text); /* two copies of the text */
position: absolute; inset: 0;
overflow: hidden;
}
.glitch::before { color: #ff2d55; animation: slice-a 2s infinite linear alternate-reverse; }
.glitch::after { color: #00e5ff; animation: slice-b 3s infinite linear alternate-reverse; }
@keyframes slice-a {
0% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 0); }
20% { clip-path: inset(70% 0 10% 0); transform: translate(3px, 0); }
/* … more random slices … */
}Three ingredients: the text is duplicated into two pseudo-elements via attr(data-text); each copy is tinted a different colour and offset a few pixels, giving the chromatic-aberration look; and clip-path: inset() keyframes show only a horizontal slice of each copy at a time, jumping between positions so the slices appear to tear. Different durations on the two copies keep the pattern from repeating obviously.
Controls and what they change
| Control | Effect |
|---|---|
| Colour A / Colour B | The two ghost tints; red/cyan or magenta/green read most like a broken signal |
| Offset | How far the ghosts shift horizontally (2–6 px is typical) |
| Intensity | How many slices per cycle and how far they jump |
| Speed | Cycle duration; 1–3 s for constant glitching, 5–8 s for occasional bursts |
| Font | Bold, wide or monospaced fonts show the effect best |
Using it without annoying everyone
- Trigger it, don't loop it. Glitch on hover, on page load for one second, or every few seconds for a moment — a permanently glitching heading is exhausting.
- One element per screen. The effect is loud; a single hero word or a 404 heading is enough.
- Keep the base text readable. The real text stays in place; only the ghosts move, so the word remains legible throughout.
- Reduced motion: under
prefers-reduced-motion: reduce, disable the animation and keep at most a static colour offset. - Photosensitivity: avoid rapid high-contrast flashing (more than three flashes a second); keep flicker subtle or absent.
Variations
- Hover-only: set
animation-play-state: pausedby default andrunningon:hover. - Scanlines: overlay a repeating-linear-gradient of 1 px dark lines at low opacity for a CRT feel.
- Skew: add small
skewX()values in a few keyframes for a sharper tear. - Image glitch: the same slicing technique works on an image by using two absolutely positioned copies with
mix-blend-mode.
Performance and support
The animation uses clip-path and transform, both compositor-friendly, so it runs smoothly even on phones. attr() in content and clip-path: inset() are supported in every current browser. Make sure the data-text attribute matches the visible text exactly, or the ghosts will show different words.