CSS Text Glitch Effect Generator - Animated Glitch Text Builder

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

<style>
@keyframes glitch-_R_hbqav5ubqiudb_ {
  0%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  5%  { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 2px); }
  10% { clip-path: inset(50% 0 30% 0); transform: translate(4px, -2px); }
  15% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, 4px); }
  20% { clip-path: inset(70% 0 10% 0); transform: translate(2px, -4px); }
  25% { clip-path: inset(40% 0 40% 0); transform: translate(-4px, 0); }
  30% { clip-path: inset(0 0 100% 0); transform: translate(0); }
}

@keyframes glitch-_R_hbqav5ubqiudb_-2 {
  0%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  5%  { clip-path: inset(60% 0 10% 0); transform: translate(4px, -2px); }
  10% { clip-path: inset(30% 0 50% 0); transform: translate(-4px, 2px); }
  15% { clip-path: inset(80% 0 5%  0); transform: translate(2px, -4px); }
  20% { clip-path: inset(5%  0 70% 0); transform: translate(-2px, 4px); }
  25% { clip-path: inset(40% 0 40% 0); transform: translate(4px, 0); }
  30% { clip-path: inset(0 0 100% 0); transform: translate(0); }
}

.glitch-text {
  position: relative;
  font-size: 48px;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  color: #ff0000;
  animation: glitch-_R_hbqav5ubqiudb_ 1s infinite linear;
}

.glitch-text::after {
  color: #0000ff;
  animation: glitch-_R_hbqav5ubqiudb_-2 1s infinite linear;
  animation-delay: 0.15s;
}
</style>