OneTaskBy Tim King · Updated
Glitch Text Effect
Jittering Red and Cyan Copies With Sliced Distortion for Broken-Screen Headlines
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Glitch Text Effect works
This glitch text effect generator makes a heading flicker like a damaged screen, with red and cyan copies jumping out of line and slices of the text shifting sideways. Set the text, size, split distance and speed, then copy the HTML and CSS.
Glitch text suits game sites, tech launches and anything with a cyberpunk or retro computer feel.
How the glitch text effect works
The text appears three times: the real heading plus two copies made with ::before and ::after
from a data-text attribute. The copies are tinted with your split colours and cropped with
clip-path into thin bands. Keyframes move the bands and nudge the copies sideways at irregular
moments, which reads as a glitch rather than a smooth animation.
Keeping it readable
Most of each loop the copies sit almost exactly behind the text, so the heading stays legible and the glitch comes in short bursts. Screen readers read the heading once, because the copies are drawn by CSS.
FAQ
Why does my glitch text show the wrong word?
The copies come from the data-text attribute, so it must match the heading text exactly. If you change one, change the other, or set both from the same variable in your template.
Can I make the glitch happen less often?
Yes. Increase the glitch time. The bursts happen at fixed points in the loop, so a longer loop spreads them further apart while each burst keeps the same sharp, broken look.
Is the glitch effect safe for people sensitive to flashing?
The effect shifts and clips the text rather than flashing the screen, and the copied CSS turns it off entirely for visitors who prefer reduced motion. Avoid very short glitch times on large headings.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Text Scramble Effect
Make a headline decode from random characters with pure CSS.
Scanline Effect
Retro CRT scanlines with an optional sweeping band.
CSS Text Shadow Generator
Visual text-shadow builder with drop, long, neon and outline presets.
Synthwave Grid Background
Retro 80s neon grid floor with a striped sunset sun.
Text Animation
Animate a headline letter by letter and copy the CSS.