CP

CSS Glitch Text Effect

Home/Tools/Glitch Text Effect

Create animated CSS glitch text effects with custom colors, speed, and intensity.

No sign-up neededRuns in your browserProduction-ready CSS

Glitch Settings

48px
1s
4

Preview

GLITCH
HTML required: Add data-text="YOUR TEXT" attribute to the element for the pseudo-element content.
Generated CSS
@keyframes glitch-clip1 {
  0%   { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 0); }
  50%  { clip-path: inset(40% 0 40% 0); transform: translate(4px, 0); }
  100% { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 0); }
}
@keyframes glitch-clip2 {
  0%   { clip-path: inset(65% 0 10% 0); transform: translate(4px, 0); }
  50%  { clip-path: inset(75% 0 5% 0); transform: translate(-4px, 0); }
  100% { clip-path: inset(65% 0 10% 0); transform: translate(4px, 0); }
}

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

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

.glitch-text::before {
  color: #ff0055;
  animation: glitch-clip1 1s infinite linear;
  mix-blend-mode: screen;
}

.glitch-text::after {
  color: #00ffc8;
  animation: glitch-clip2 0.7s infinite linear;
  mix-blend-mode: screen;
}

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

Related Tools

Box Shadow Generator

Design complex box shadows with multiple layers, blur, spread, and color options.

Text Shadow Generator

Create eye-catching text shadows with multiple layers and effects.

Border Radius Generator

Fine-tune border radius for each corner with visual preview.