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.