← Back to gallery
CSS

Glitch Text Clip-path Slice Bands

A project-authored CSS glitch showcase where the readable text stays put while two aria-hidden decoy copies burst through animated clip-path inset bands with small RGB offset shifts.

Duration
3s
Resolution
1440×900
Format
CSS
glitchclip-pathslice-bandrgb-splittext-effect

Glitch / clip-path / slice bands

Clip-path slice bands for controlled text glitch

Reimplements a glitch text effect by stacking a base phrase with two aria-hidden decoys and animating their clip-path inset bands independently so the main text stays readable while bursts fire.

edge flicker glitch — 1.6px offset · 1.60s cycle
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.

1.6s · burst cycle · 3 bands · thin inset

  • 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.

3.4s · slow drift · 4 bands · vertical march

  • 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.

2.1s · stutter cycle · 5 bands · jumpy cuts

  • dropout
  • hero-only
  • reduced-motion required

Band inspector

Edge Flicker

SIGNAL LOCK
Burst
1.60s cycle
RGB offset
1.6px

Bursts fire at ~1.6s and clear quickly. RGB offsets sit under two pixels so reading flow survives even at small sizes.

Live controls

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

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

.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;
}