← Back to gallery
CSS

Glitch Text Clip-path Slice Bands

Build a readable CSS glitch text effect with clip-path bands, RGB split decoys, mix-blend-mode, aria-hidden layers, and reduced-motion handling.

Original clean-room implementation by Animation Patterns. Code examples are available under CC BY 4.0.

glitchclip-pathrgb-splitmix-blend-modetext-effectaria-hiddenprefers-reduced-motion

Implementation depth

Readable glitch effects keep one real text node as the base and use clipped, aria-hidden duplicates for the distortion. That lets search, selection, and assistive tech read the phrase normally while the visual layers jitter.

Keep the slice bands short and intermittent. Constant RGB split motion can make the text harder to read and can trigger vestibular discomfort, so reduced motion should remove the jitter and keep only the stable base wordmark.

Interactive examples

Glitch / clip-path / slice bands

Reimplements a glitch text effect by stacking a base phrase with two aria-hidden RGB-shifted decoys and animating their clip-path inset bands independently so the underlying text stays readable while bursts fire. Three cadences — short edge flicker, ambient scanline drift, and aggressive dropout stutter.

SIGNAL LOCK

Short bursts + tight RGB split

Edge Flicker

Two aria-hidden decoy copies ride thin clip-path bands and flicker in short bursts so the underlying text stays legible between glitches.

  • RGB split
  • short burst
  • legible fallback
BROADCAST

Slow sweep + vertical band march

Scanline Drift

Bands translate down the glyph stack to feel like a CRT scanline, so the glitch reads as ambient interference rather than rapid flicker.

  • scanline
  • ambient
  • opposite bands
ERROR 404

Jumpy cuts + wide shifts

Dropout Stutter

Aggressive inset jumps and wider translate values simulate a video dropout — fine for hero lockups, too loud for body copy.

  • dropout
  • hero-only
  • reduced-motion required

Band inspector

Edge Flicker

SIGNAL LOCK
  • RGB split
  • short burst
  • legible fallback

Two aria-hidden decoy copies ride thin clip-path bands and flicker in short bursts so the underlying text stays legible between glitches. Bursts fire at the configured cycle and clear quickly; RGB offsets sit under two pixels so reading flow survives even at small sizes.

Helped you ship something? 🐟 Send my cat a churu

.glitch-word {
  --glitch-offset: 1.6px;
  --glitch-shift: 1.2px;
  position: relative;
  display: inline-block;
}

.glitch-word__base { position: relative; z-index: 1; }

.glitch-word__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: screen;
}

.glitch-word__layer--cyan {
  color: rgba(103, 232, 249, 0.92);
  transform: translateX(calc(var(--glitch-offset) * -1));
  animation: glitchBandA 1.60s steps(5, end) infinite;
}

.glitch-word__layer--magenta {
  color: rgba(244, 114, 182, 0.92);
  transform: translateX(var(--glitch-offset));
  animation: glitchBandB 1.60s steps(5, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .glitch-word__layer { animation: none; opacity: 0; }
}

How to make this

A CSS glitch text effect keeps one readable base phrase, stacks aria-hidden RGB copies above it, and animates their clip-path inset bands in short stepped bursts.

html
1<span class="glitch-slice" data-text="SIGNAL LOCK">  <span class="glitch-slice__base">SIGNAL LOCK</span>3  <span class="glitch-slice__layer glitch-slice__layer--cyan" aria-hidden="true">SIGNAL LOCK</span>  <span class="glitch-slice__layer glitch-slice__layer--magenta" aria-hidden="true">SIGNAL LOCK</span></span> <style>.glitch-slice {  position: relative;  display: inline-block;  color: #f8fafc;  font: 800 2rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;  letter-spacing: .08em;}.glitch-slice__base {  position: relative;  z-index: 1;}.glitch-slice__layer {20  position: absolute;  inset: 0;  pointer-events: none;  user-select: none;  mix-blend-mode: screen;25  clip-path: inset(0 0 100% 0);  will-change: transform, clip-path;}.glitch-slice__layer--cyan {  color: rgba(103, 232, 249, .92);  transform: translateX(-2px);  animation: glitch-slice-cyan 1.8s steps(6, end) infinite;32}.glitch-slice__layer--magenta {  color: rgba(244, 114, 182, .92);  transform: translateX(2px);  animation: glitch-slice-magenta 1.8s steps(6, end) infinite;}@keyframes glitch-slice-cyan {  0%, 60%, 100% { clip-path: inset(0 0 100% 0); }  66% { clip-path: inset(12% 0 72% 0); transform: translateX(-4px); }  74% { clip-path: inset(46% 0 34% 0); transform: translateX(3px); }  86% { clip-path: inset(68% 0 10% 0); transform: translateX(-3px); }}@keyframes glitch-slice-magenta {  0%, 62%, 100% { clip-path: inset(0 0 100% 0); }  68% { clip-path: inset(34% 0 48% 0); transform: translateX(4px); }  78% { clip-path: inset(8% 0 76% 0); transform: translateX(-3px); }  90% { clip-path: inset(54% 0 20% 0); transform: translateX(3px); }}@media (prefers-reduced-motion: reduce) {  .glitch-slice__layer {    animation: none;    opacity: 0;  }55}</style>

Annotated snippet

  1. Line 1The wrapper keeps the phrase as normal inline content. data-text is optional metadata for tooling; the readable base layer is still the actual DOM text.
    PitfallShould duplicate glitch layers be aria-hidden?

    Yes. The cyan and magenta copies repeat the same text for visual effect only, so mark them aria-hidden and leave the real phrase in a normal text node.

  2. Line 3The colored copies are aria-hidden because they duplicate the same phrase for visual interference only. Screen readers should encounter the phrase once.
    PitfallShould duplicate glitch layers be aria-hidden?

    Yes. The cyan and magenta copies repeat the same text for visual effect only, so mark them aria-hidden and leave the real phrase in a normal text node.

  3. Line 20The clone layers sit exactly on top of the base phrase. pointer-events and user-select are disabled so selection and clicks target the real text underneath.
  4. Line 25clip-path starts fully hidden and reveals only narrow horizontal bands during bursts. This is the difference between a readable glitch and a whole-word RGB smear.

    before uses text-shadow to colour the whole word in cyan + magenta — every glyph wears the same chromatic smear and the label gets harder to read. after stacks two aria-hidden duplicates clipped to a narrow horizontal band, so the glitch interference only happens in that slice while the base phrase stays crisp.

    PitfallHow do I keep glitch text readable?

    Keep one stable base phrase and restrict the colored copies to short clipped bands. Avoid moving the entire word continuously; that turns the effect into a blur and makes short labels harder to scan.

  5. Line 32steps() timing makes the glitch snap between broken frames instead of sliding smoothly. Smooth interpolation reads like a regular text animation, not signal interference.

    Same clipped slice + RGB offset on both. Smooth ease-in-out timing makes the colour bands glide back and forth — it reads as a soft animated label. steps(6, end) freezes the offset between six discrete frames so the eye registers it as broken signal interference, which is the actual glitch effect.

    PitfallHow do I keep glitch text readable?

    Keep one stable base phrase and restrict the colored copies to short clipped bands. Avoid moving the entire word continuously; that turns the effect into a blur and makes short labels harder to scan.

  6. Line 55Reduced motion removes the duplicate layers entirely. The base phrase remains visible, selectable, and stable.
    PitfallWhat should prefers-reduced-motion do for glitch effects?

    Disable the moving decoy layers and show the stable base phrase. Glitch is intentionally disruptive motion, so reduced-motion users should not see flicker, slice jumps, or RGB shaking.

Other pitfalls

Is clip-path animation supported for glitch text?
Inset clip-path animation works in modern Chromium, Firefox, and Safari. Test older Safari versions if the effect is critical, and keep the base layer readable when clip-path or animation is missing.
Can glitch text be expensive?
It can be if many large headings animate clip-path, blend modes, and filters at once. Keep the effect short, avoid heavy filters, and do not run high-frequency glitch loops across long paragraphs.

Notes

Overview

Glitch text effects stack two aria-hidden RGB-shifted decoys behind a readable base text node and animate clip-path: inset() bands on the decoys at staggered intervals. The base stays legible at all times; the decoys do the visual work of dropouts, scanlines, and flickers. Three cadences ship: a short edge flicker, an ambient scanline drift, and an aggressive dropout stutter.

When to use it

Reach for glitch text on cyberpunk product surfaces, error states, retro-tech accents, hero headlines that want to feel unstable on purpose. Skip it for body copy — the flicker is exhausting at reading speed. Skip it for accessibility-critical content (error messages, form validation) — users with photosensitive epilepsy can be triggered by rapid flicker.

How it works

Three identical text nodes stack at the same position. The base is normal color; one decoy gets color: cyan + translateX(-1.2px); the other gets color: magenta + translateX(1.2px). mix-blend-mode: screen on the decoys lightens the result where they overlap, simulating an RGB sub-pixel offset. Each decoy then animates a clip-path: inset(top right bottom left) with bands at staggered y-positions so only horizontal slices of the decoy show at a time — the “glitch slice” effect. Synchronizing the bands at different cycles makes the noise feel non-repeating.

Production gotchas

The base text must be position: relative with the decoys at position: absolute; inset: 0; absolute positioning on the decoys is what lets clip-path slice them without affecting the base. Decoys must be aria-hidden="true" or screen readers announce the text three times. Strobe rates above 3Hz can trigger photosensitive epilepsy — never set the flicker keyframe steps shorter than 333ms, and gate the whole effect behind a user preference for high-intensity variants.

Accessibility

WCAG 2.3.1 (Three Flashes) is the load-bearing constraint here. Under prefers-reduced-motion: reduce hide the decoys entirely (display: none or opacity: 0) so motion-sensitive users see only the static base text. The base text is the only real DOM node screen readers process; the decoys add nothing semantic.

References

Related patterns