Block Glitch

How it works

Block Glitch is an animated glitch & distortion text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Block Glitch exposes 2 dedicated controls — Block Hue and Speed — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Block Glitch — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Bungee', cursive (load from Google Fonts).
 */

.text-effect {
  font-family: 'Bungee', cursive;
  font-weight: 700;
  letter-spacing: -2px;
  text-transform: none;
}

.text-effect {
  position: relative;
  color: hsl(136 12% 92%);
  animation: text-effect-jump 3.5s steps(1) infinite;
}
.text-effect::before {
  content: "";
  position: absolute;
  inset: 0;
  background: hsl(136 95% 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: text-effect-bands 2.7s steps(1) infinite;
}

@keyframes text-effect-bands {
  0%, 100% { clip-path: inset(100% 0 0 0); }
  10% { clip-path: inset(18% 0 64% 0); }
  22% { clip-path: inset(70% 0 8% 0); }
  35% { clip-path: inset(40% 0 42% 0); }
  48% { clip-path: inset(100% 0 0 0); }
  62% { clip-path: inset(8% 0 80% 0); }
  74% { clip-path: inset(55% 0 28% 0); }
  88% { clip-path: inset(100% 0 0 0); }
}
@keyframes text-effect-jump {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  35% { transform: translateX(3px); }
  62% { transform: translateX(-1px); }
}

Related Glitch & Distortion effects

• Glitch
• Scanline Glitch
• Shake Glitch
• VHS
• Color Split