Animated glitch text

Two different jobs get called animated glitch text. One is impossible by definition. The other takes about forty lines of CSS, and the code is on this page.

By The Glitch Text Generator team · Published 2026-09-08 · Last reviewed 2026-09-08

The part that cannot work

Text you copy from a generator and paste into a bio, a caption or a Discord message is made of Unicode characters. Unicode encodes what a character is, not how it moves. There is no animation channel, no frame data, nothing to attach motion to.

So no generator can hand you copy-and-paste text that moves on Instagram. Anything claiming otherwise is either giving you a video, a GIF, or a still arrangement of marks. The glitch text generator here does the still version, and its Shuffle button rerolls the arrangement, which is as close as characters get to motion.

The part that works: CSS

If you control the page, the classic effect is straightforward. Layer two offset copies of the text, tint one cyan and one magenta, then animate a clip-path on each so horizontal slices jump out of alignment at different rates.

Live, running on this page. Reduce motion in your OS settings and it stops.

The markup

The text is duplicated into a data-text attribute so the pseudo-elements have something to render. Keep the real text in the element so it stays selectable and readable by search engines and screen readers.

<span class="glitch" data-text="SIGNAL LOST">SIGNAL LOST</span>

The CSS

.glitch {
  position: relative;
  color: #e8e8f2;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Two offset copies sit behind the real text. */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: #08080c;
  overflow: hidden;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff6b9d;
  animation: glitch-a 2.5s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: 2px 0 #7df9d0;
  animation: glitch-b 3.1s infinite linear alternate-reverse;
}

/* Only clip-path animates, so this stays on the compositor. */
@keyframes glitch-a {
  0%   { clip-path: inset(10% 0 84% 0); }
  20%  { clip-path: inset(52% 0 30% 0); }
  40%  { clip-path: inset(78% 0  8% 0); }
  60%  { clip-path: inset(28% 0 62% 0); }
  80%  { clip-path: inset(66% 0 22% 0); }
  100% { clip-path: inset(40% 0 44% 0); }
}

@keyframes glitch-b {
  0%   { clip-path: inset(70% 0 16% 0); }
  20%  { clip-path: inset(18% 0 70% 0); }
  40%  { clip-path: inset(46% 0 40% 0); }
  60%  { clip-path: inset(88% 0  4% 0); }
  80%  { clip-path: inset(34% 0 56% 0); }
  100% { clip-path: inset(60% 0 26% 0); }
}

/* Non-negotiable: some people get motion sick. */
@media (prefers-reduced-motion: reduce) {
  .glitch::before,
  .glitch::after { animation: none; opacity: 0; }
}

Two things people get wrong

Animating the wrong properties. Animating clip-path and transform runs on the compositor and costs almost nothing. Animating text-shadow, filter or left forces a repaint on every frame, which is fine on a desktop and visibly janky on a mid-range phone. The snippet above sets the shadows once and only animates the clip.

Skipping reduced motion. Rapid flickering is a genuine accessibility problem, not a nice-to-have. The prefers-reduced-motion block at the end of the snippet is the minimum. If the effect is decorative, turning it off entirely for those users is the right call.

Making an animated glitch GIF

For a caption, a sticker or a video overlay, you need frames rather than characters.

1. Generate your text, then hit Shuffle and screenshot after each reroll. Four to six frames is plenty.
2. Assemble them in any GIF tool at roughly 100ms per frame.
3. Set the loop to infinite and keep the total under about a second, or it stops reading as a glitch.

Honestly, for anything polished a video editor will beat this. An RGB split plus a displacement map on two or three frames gets you a much better result than stacked combining marks ever will, because you control the distortion instead of inheriting it from a font engine.

Which one do you actually need?