How does the CSS glitch effect actually work?

The trick uses two duplicate copies of the text (via ::before and ::after pseudo-elements reading a data-text attribute), each shifted a couple of pixels and tinted with text-shadow in two contrasting colors — this fakes the color-channel misalignment seen on a damaged screen. An animation randomly jumps each layer's clip-path between thin horizontal slices, cutting and repositioning them to look like scan-line tearing.

Why does the markup need a data-text attribute?

The ::before and ::after pseudo-elements can't inherit the element's text content directly, so CSS's content: attr(data-text) reads it from the attribute instead — keeping the real text in one place rather than duplicating it three times in the HTML. Screen readers still only see the actual element text once; the pseudo-elements are purely decorative.

Will this affect page performance if I use it on a lot of text?

Each glitching element renders two extra pseudo-element layers and runs a clip-path animation, which is inexpensive for a headline or two but adds up if applied to a whole paragraph or list — reserve it for short, attention-grabbing text like hero titles or badges rather than body copy.

Can I make it glitch only when someone hovers or focuses it?

Yes — enable 'Glitch on hover only' and the generated CSS moves the animation into a :hover/:focus-visible rule instead of running it continuously, which is friendlier for readability and for users who'd rather not see constant motion.

Is this generated locally, and does it respect reduced-motion settings?

Everything is computed client-side with no upload. The generated CSS is also wrapped with a @media (prefers-reduced-motion: reduce) rule that disables the animation, since a flickering glitch effect can be uncomfortable for motion-sensitive visitors.

GLITCH TEXT GENERATOR

Turn headline text into an animated RGB-split glitch effect and copy the HTML and CSS.

GLITCH

Your text

Channels

Channel A

Channel B

Channel offset: 3px

Jitter speed: 2.5s

Glitch on hover only

Presets

HTML

<span class="glitch-text" data-text="GLITCH">GLITCH</span>

CSS

.glitch-text {
  position: relative;
  display: inline-block;
  color: #f2e9dc;
  font-weight: 700;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.glitch-text::before {
  color: #ff0000;
  text-shadow: -3px 0 #ff0000;
  transform: translate(-3px, 0);
  mix-blend-mode: screen;
}

.glitch-text::after {
  color: #00fff9;
  text-shadow: 3px 0 #00fff9;
  transform: translate(3px, 0);
  mix-blend-mode: screen;
}

.glitch-text::before {
  animation: glitchtext-anim-1 2.5s infinite linear alternate-reverse;
}

.glitch-text::after {
  animation: glitchtext-anim-2 2.5s infinite linear alternate-reverse;
}

@keyframes glitchtext-anim-1 {
  0% { clip-path: inset(0 0 85% 0); }
  20% { clip-path: inset(60% 0 5% 0); }
  40% { clip-path: inset(20% 0 55% 0); }
  60% { clip-path: inset(75% 0 15% 0); }
  80% { clip-path: inset(10% 0 70% 0); }
  100% { clip-path: inset(45% 0 30% 0); }
}

@keyframes glitchtext-anim-2 {
  0% { clip-path: inset(35% 0 45% 0); }
  20% { clip-path: inset(5% 0 80% 0); }
  40% { clip-path: inset(65% 0 10% 0); }
  60% { clip-path: inset(25% 0 60% 0); }
  80% { clip-path: inset(80% 0 5% 0); }
  100% { clip-path: inset(15% 0 65% 0); }
}

@media (prefers-reduced-motion: reduce) {
  .glitch-text::before,
  .glitch-text::after {
    animation: none !important;
    clip-path: none;
  }
}

How to build a CSS glitch text effect

1
Type your own headline into the preview box.
2
Pick a preset like Cyberpunk or VHS Damage for a quick starting point.
3
Adjust the RGB channel offset, jitter speed, and colors to taste.
4
Toggle "Glitch on hover only" if you want the effect to trigger on interaction instead of playing constantly.
5
Copy the generated HTML and CSS and paste them into your project.

Questions

How does the CSS glitch effect actually work?: The trick uses two duplicate copies of the text (via ::before and ::after pseudo-elements reading a data-text attribute), each shifted a couple of pixels and tinted with text-shadow in two contrasting colors — this fakes the color-channel misalignment seen on a damaged screen. An animation randomly jumps each layer's clip-path between thin horizontal slices, cutting and repositioning them to look like scan-line tearing.
Why does the markup need a data-text attribute?: The ::before and ::after pseudo-elements can't inherit the element's text content directly, so CSS's content: attr(data-text) reads it from the attribute instead — keeping the real text in one place rather than duplicating it three times in the HTML. Screen readers still only see the actual element text once; the pseudo-elements are purely decorative.
Will this affect page performance if I use it on a lot of text?: Each glitching element renders two extra pseudo-element layers and runs a clip-path animation, which is inexpensive for a headline or two but adds up if applied to a whole paragraph or list — reserve it for short, attention-grabbing text like hero titles or badges rather than body copy.
Can I make it glitch only when someone hovers or focuses it?: Yes — enable 'Glitch on hover only' and the generated CSS moves the animation into a :hover/:focus-visible rule instead of running it continuously, which is friendlier for readability and for users who'd rather not see constant motion.
Is this generated locally, and does it respect reduced-motion settings?: Everything is computed client-side with no upload. The generated CSS is also wrapped with a @media (prefers-reduced-motion: reduce) rule that disables the animation, since a flickering glitch effect can be uncomfortable for motion-sensitive visitors.