Home All ToolsCSS Text Glitch Effect Generator

CSS Text Glitch Effect Generator

Apply glitch text effects with CSS.

Text

Glitch Color 1

Glitch Color 2

HTML

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

CSS

.glitch {
  position: relative;
  font-size: 5rem;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.1em;
  animation: glitch-skew 1s infinite linear alternate-reverse;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #00ffff;
  animation: glitch-anim-1 1s infinite linear alternate-reverse;
}
.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #ff00ff;
  animation: glitch-anim-2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% { clip-path: polygon(0 2%, 100% 2%, 100% 98%, 0 98%); }
  25% { clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%); }
  50% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
  75% { clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%); }
  100% { clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0 100%); }
}

@keyframes glitch-anim-2 {
  0% { clip-path: polygon(0 15%, 100% 15%, 100% 20%, 0 20%); }
  25% { clip-path: polygon(0 90%, 100% 90%, 100% 95%, 0 95%); }
  50% { clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%); }
  75% { clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%); }
  100% { clip-path: polygon(0 30%, 100% 30%, 100% 35%, 0 35%); }
}

@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  25% { transform: skew(1deg); }
  50% { transform: skew(0deg); }
  75% { transform: skew(-1deg); }
  100% { transform: skew(0deg); }
}

Preview

GLITCH