CSS Glitch Text Generator

GLITCH
.glitch {
  position: relative;
  color: white;
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 0.05em 0 0 #ff0000, -0.03em -0.04em 0 #0000ff, 0.025em 0.04em 0 #00ff00;
  animation: glitch 2s infinite;
}
@keyframes glitch {
  0% { text-shadow: 0.05em 0 0 #ff0000, -0.03em -0.04em 0 #0000ff, 0.025em 0.04em 0 #00ff00; }
  15% { text-shadow: 0.05em 0 0 #ff0000, -0.03em -0.04em 0 #0000ff, 0.025em 0.04em 0 #00ff00; }
  16% { text-shadow: -0.05em -0.025em 0 #ff0000, 0.025em 0.035em 0 #0000ff; }
  49% { text-shadow: -0.05em -0.025em 0 #ff0000, 0.025em 0.035em 0 #0000ff; }
  50% { text-shadow: 0.05em 0.035em 0 #ff0000, 0.03em 0 0 #0000ff; }
  99% { text-shadow: 0.05em 0.035em 0 #ff0000, 0.03em 0 0 #0000ff; }
  100% { text-shadow: -0.05em 0 0 #ff0000, -0.025em -0.04em 0 #0000ff; }
}

What is CSS Glitch Text Generator?

Free online CSS glitch text effect generator. Create cyberpunk-style text glitch and错位 animations. Customize colors, speed, and direction. Copy the CSS code straight into your project.

▶Use Cases4 scenarios
  • ◆Web effects
  • ◆Cyberpunk design
  • ◆Title animations
  • ◆Creative showcases
▶How to Use4 steps
  1. 1Enter your text
  2. 2Adjust colors and animation settings
  3. 3Preview the glitch effect
  4. 4Copy the generated CSS
▶Features4 features
  • ✓Live preview
  • ✓Custom colors
  • ✓CSS export
  • ✓Multiple animation directions
▶FAQ7 questions
What is CSS Glitch Text Generator?

An online CSS glitch text generator. Create cyberpunk-style text glitch animations. Supports multiple input formats with one-click copy or download. All operations run locally in your browser — no uploads.

Can I use the generated CSS directly?

Yes — just paste it into your project stylesheet.

Does it work with Chinese characters?

Yes, it supports all Unicode characters including Chinese.

Can the generated CSS be used in production?

Yes. Generated code is standard CSS, compatible with all modern browsers.

Can I customize parameters?

Yes. Adjust colors, animation speed, glitch direction, and intensity.

Can I copy the generated code directly?

Yes. One-click copy the CSS code and paste it straight into your stylesheet.

Do I need to sign up or pay?

No. Completely free, no signup, no usage limits.

Related Tools

CSS Text Shadow Generator

Visually create text shadow effects with live preview.

CSS Button Generator

Generate beautiful CSS button code online with radius, colors, and sizing

CSS Gradient Generator

Create beautiful CSS gradients with a visual editor and copy the code.