Glitch text animation. Cyberpunk · digital noise.
⚡ Preview
GLITCH

How to use

  1. Type text.
  2. Adjust font size, intensity, speed.
  3. Set RGB channel colors (red + cyan split).
  4. Pick background (darker = stronger effect).
  5. Copy HTML+CSS.

Key features

  • RGB channel split (red + cyan)
  • clip-path partial display animation
  • Adjustable intensity / speed
  • All-browser CSS-only
  • Full HTML+CSS code copy

Use cases

  • Hacking / cyberpunk sites — main hero
  • Game sites — hero names / logos
  • YouTube intros — strong first impression
  • Album pages — indie / electronic
  • 404 error pages — playful error

How glitch works

Mimics real screen glitches. (1) RGB channel split via text-shadow offsets (CRT ghosting). (2) clip-path slice via keyframes (tape skip). (3) Quick position shifts for shake. Evokes 90s VHS / CRT nostalgia.

FAQ

Accessibility?

Fast flickering can trigger photosensitive seizures. Add `prefers-reduced-motion` query to disable.

Mobile performance?

Intensity ≤ 5 px, speed ≥ 3 s is fine. Low CPU load.

SVG glitch?

SVG filter feTurbulence offers more detail. CSS is lightweight and universal.

Free?

Yes.