1001Tools

CSS Text Glitch Generator

Create animated cyberpunk-style glitch text using pure CSS. Customize colors, intensity, and speed, then copy the code.

Preview

GLITCH

Settings

Code

<!-- HTML -->
<div class="glitch" data-text="GLITCH">GLITCH</div>

/* CSS */
.glitch {
  position: relative;
  display: inline-block;
  font-size: 64px;
  font-weight: 800;
  color: #ffffff;
  background: #0f0f14;
  letter-spacing: 0.05em;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: #0f0f14;
  overflow: hidden;
}

.glitch::before {
  left: 3px;
  text-shadow: -3px 0 #ff00c1;
  animation: glitch-a 2s infinite linear alternate-reverse;
}

.glitch::after {
  left: -3px;
  text-shadow: 3px 0 #00fff9;
  animation: glitch-b 3.00s infinite linear alternate-reverse;
}

@keyframes glitch-a {
  0% { clip-path: inset(20% 0 60% 0); }
  20% { clip-path: inset(60% 0 10% 0); }
  40% { clip-path: inset(40% 0 40% 0); }
  60% { clip-path: inset(80% 0 5% 0); }
  80% { clip-path: inset(10% 0 70% 0); }
  100% { clip-path: inset(50% 0 30% 0); }
}

@keyframes glitch-b {
  0% { clip-path: inset(70% 0 10% 0); }
  20% { clip-path: inset(15% 0 65% 0); }
  40% { clip-path: inset(55% 0 25% 0); }
  60% { clip-path: inset(5% 0 85% 0); }
  80% { clip-path: inset(35% 0 45% 0); }
  100% { clip-path: inset(85% 0 2% 0); }
}

Related tools