CSS Text Glitch Effect 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.

Is this tool free?

Yes — completely free. No accounts, no paywalls. Just open the page and go.

Does my data get sent to a server?

No. Everything runs in your browser. Your data never leaves your device.

Does it work on my phone?

Absolutely. Works great on phones, tablets, and desktops alike.

How fast is it?

Instant for most inputs. Large datasets might take a second or two.

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.