Back to Snippets

Cyberpunk Glitch Text Effect

Add a futuristic vibe to your website with this pure CSS glitch animation. We use `clip-path` and keyframes to distort the text layers, creating a chaotic digital interference effect perfect for gaming or tech themes.

425

#css

#glitch

#text effect

#animation

#cyberpunk

#distortion

#clip-path

/HTML *CSS ()JS Output Live Updates

* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  background: #050505;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.glitch {
  font-size: 4rem;
  font-weight: 900;
  color: white;
  position: relative;
  letter-spacing: 4px;
}

/* Create two layers of the same text */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #050505; /* Matches body bg */
}

.glitch::before {
  left: 2px;
  text-shadow: -1px 0 #ff00c1;
  clip-path: inset(44% 0 61% 0);
  animation: glitch-anim 2s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -1px 0 #00fff9;
  clip-path: inset(54% 0 10% 0);
  animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

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

Cyberpunk Glitch Text Effect

Share Code Snippet