Efecto Glitch de Texto CSS

Crea animaciones de texto con efecto de falla usando CSS

Procesamiento en el NavegadorTus datos nunca salen de tu navegador

Text Settings

px

Glitch Style

Colors

Text Color
Background
Glitch Color 1
Glitch Color 2

Animation Settings

Animation Speed0.5s
Glitch Intensity5px
Enable Animation

Preview

GLITCH

CSS

.glitch {
  position: relative;
  font-size: 72px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

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

.glitch::before {
  left: 5px;
  text-shadow: -5px 0 #00ffff;
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim-1 0.5s infinite linear alternate-reverse;
}

.glitch::after {
  left: -5px;
  text-shadow: -5px 0 #ff00ff;
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim-2 0.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% { clip: rect(132px, 350px, 101px, 30px); }
  20% { clip: rect(1px, 350px, 147px, 30px); }
  40% { clip: rect(24px, 350px, 94px, 30px); }
  60% { clip: rect(78px, 350px, 44px, 30px); }
  80% { clip: rect(65px, 350px, 129px, 30px); }
  100% { clip: rect(53px, 350px, 16px, 30px); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(129px, 350px, 36px, 30px); }
  20% { clip: rect(36px, 350px, 4px, 30px); }
  40% { clip: rect(85px, 350px, 66px, 30px); }
  60% { clip: rect(148px, 350px, 138px, 30px); }
  80% { clip: rect(34px, 350px, 105px, 30px); }
  100% { clip: rect(149px, 350px, 36px, 30px); }
}

HTML

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

About Efecto Glitch de Texto CSS

Crea animaciones de texto con efecto de falla usando CSS

Use this free online generadores css tool to work faster without installing extra software. The interface is built for quick input, clear output, and straightforward results on desktop and mobile devices.

Processing

This tool runs in your browser whenever possible, which keeps your inputs private and reduces unnecessary round-trips to the server.