How does the glitch effect work?

Two pseudo-elements render copies of the text in accent colours with horizontal shifts, animated on staggered keyframe schedules with steps() timing for abrupt changes.

Glitch effects flicker, which can trigger photosensitive seizures. Always wrap the animation with @media (prefers-reduced-motion: reduce) { animation: none; } to disable it for users who asked for less motion.

Can I use it for body text?

No — animated text harms readability. Reserve glitch for a single hero headline or section title.

What fonts work best?

Bold sans-serif fonts like Inter, Space Grotesk, or IBM Plex Sans show the glitch clearly. Thin or decorative fonts get lost in the colour shift.

Does it work in old browsers?

All pseudo-elements and keyframes used have been supported since 2015. Modern evergreen browsers are fine; IE11 and very old Android will fall back to static text.

CSS Text Glitch Effect Generator

Cyberpunk-style glitch animation on any text.

Rendering runs in your browser.

GLITCH

CSS + HTML

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

<style>
.glitch {
  position: relative;
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 72px;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 0 0 0);
}
.glitch::before {
  color: #FF00FF;
  animation: glitch-shift 2.0s infinite steps(2, end);
  transform: translate(-3px, 0);
}
.glitch::after {
  color: #00FFFF;
  animation: glitch-shift-2 2.6s infinite steps(2, end) reverse;
  transform: translate(3px, 0);
}
@keyframes glitch-shift {
  0%, 20% { clip-path: inset(0 0 80% 0); transform: translate(-3px, -2px); }
  30%, 60% { clip-path: inset(40% 0 30% 0); transform: translate(-3px, 2px); }
  70%, 100% { clip-path: inset(80% 0 0 0); transform: translate(-3px, 0); }
}
@keyframes glitch-shift-2 {
  0%, 20% { clip-path: inset(60% 0 20% 0); transform: translate(3px, 2px); }
  30%, 60% { clip-path: inset(10% 0 70% 0); transform: translate(3px, -2px); }
  70%, 100% { clip-path: inset(30% 0 40% 0); transform: translate(3px, 0); }
}
</style>

Similar tools

CSS Gradient Generator

Design linear, radial, and conic gradients with a visual editor.

CSS Box Shadow Generator

Layer shadows with a live preview and copy-ready CSS.

CSS Border Radius Generator

Per-corner radius and organic blob shapes.

What is a CSS Text Glitch Effect Generator?

A CSS text glitch effect layers colour-offset copies of a heading over the original, shifts them slightly on each animation frame, and clips parts of each layer to produce the cyberpunk "broken television" aesthetic. It works entirely with CSS — no GIFs, no JavaScript, no images. The technique is a staple of gaming websites, hackathon landing pages, Y2K retro designs, and cyberpunk-themed interfaces.

The recipe uses three layers: the base element shows the text normally; ::before draws the text in a cyan/pink/red with a horizontal shift and a rapidly-changing clip-path; ::after draws it in a second accent colour with the opposite shift and a different clip-path schedule. Each pseudo-element animates on its own keyframe schedule with steps() timing so the changes happen abruptly rather than smoothly — that's what sells the "glitch" feel.

Four colour presets cover the common looks. Cyberpunk (hot pink + cyan on navy) is the classic hacker-movie aesthetic. Retro (coral + teal on deep purple) leans 80s MTV. Pastel (soft pink + baby blue on cream) is a playful, non-aggressive variant. Monochrome (red + white on black) is minimal and high-contrast.

Accessibility concerns. Glitch effects flicker by definition, which can trigger photosensitive seizures in a small minority of viewers. Always add a@media (prefers-reduced-motion: reduce) rule that disables the animation. Our site-wide CSS already applies this globally; when you paste the generated CSS into your own project, add:

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

Use sparingly. Glitch is decorative — it works best on a single hero headline or a named section title, not on body copy. Animated text harms readability. Keep the duration short (1.5–3s cycle) and the intensity under 10px for characters to remain legible.

Technical note. The data-text attribute carries the text for the pseudo-elements to render — because CSS content can reference the attribute via content: attr(data-text). This pattern avoids duplicating the text in the HTML.

How to generate a text glitch effect

Enter the text you want to glitch.
Set font size, intensity, and cycle speed.
Pick a colour preset that matches your brand.
Copy HTML + CSS and paste into your page.
Add a prefers-reduced-motion fallback so the animation disables for users who asked for less motion.

Features

Four colour presets: cyberpunk, retro, pastel, monochrome.
Font size, intensity, and cycle speed sliders.
Pure CSS — no GIFs or JavaScript.
Copy-ready HTML + CSS with the data-text attribute pattern.

Frequently asked questions

How does the glitch effect work?: Two pseudo-elements render copies of the text in accent colours with horizontal shifts, animated on staggered keyframe schedules with steps() timing for abrupt changes.
Is this accessible?: Glitch effects flicker, which can trigger photosensitive seizures. Always wrap the animation with @media (prefers-reduced-motion: reduce) { animation: none; } to disable it for users who asked for less motion.
Can I use it for body text?: No — animated text harms readability. Reserve glitch for a single hero headline or section title.
What fonts work best?: Bold sans-serif fonts like Inter, Space Grotesk, or IBM Plex Sans show the glitch clearly. Thin or decorative fonts get lost in the colour shift.
Does it work in old browsers?: All pseudo-elements and keyframes used have been supported since 2015. Modern evergreen browsers are fine; IE11 and very old Android will fall back to static text.