Free CSS Text Glitch Effect Generator
A glitch effect makes text look corrupted - split into colour channels, sliced, shaking or distorted like a bad video signal. It is popular for cyberpunk, gaming, music, tech and retro websites. This free generator creates the effect with pure CSS so you can copy it straight into your project with no JavaScript and no library.
Seven Glitch Styles
RGB split layers red and cyan copies of the text that jump through random slices. Slice tears the text horizontally. Shake jitters the whole word. Chromatic adds a pulsing colour fringe. VHS adds scanlines, a rolling bar and jitter. Neon flicker turns a glowing sign on and off. Distortion warps the letters with an animated SVG filter.
How the CSS Works
The text is duplicated with ::before and ::after pseudo-elements that read the same words from a data-text attribute. Each copy is clipped with clip-path and moved with transform inside @keyframes. The keyframes are generated from a seed, so the result is always reproducible, and Shuffle gives you a fresh pattern.
Loop, Hover or Play Once
Run the glitch continuously, only while the visitor hovers over the text, or once when the page loads. A hover-triggered glitch works well for links, buttons and headings that should not distract from reading.
Accessible by Default
Flashing and moving text can be uncomfortable for some people. The generated CSS includes a prefers-reduced-motion rule that turns the animation off for visitors who ask their device for less motion. Keep glitch effects short and avoid using them on long paragraphs.
Copy CSS, HTML or React
Get the stylesheet, the HTML snippet, a React component with its CSS, or a complete standalone page you can open in any browser. Share your settings with a link or download the page as an HTML file.