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 Cases

  • ◆Web effects
  • ◆Cyberpunk design
  • ◆Title animations
  • ◆Creative showcases

How to Use

  1. 1Enter your text
  2. 2Adjust colors and animation settings
  3. 3Preview the glitch effect
  4. 4Copy the generated CSS

Features

  • ✓Live preview
  • ✓Custom colors
  • ✓CSS export
  • ✓Multiple animation directions

FAQ

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.