Seven glitch effects for tech, gaming and music sites: an RGB split with jumping slices, a link that glitches only when hovered, CRT scanlines with a faint flicker, horizontal slices that shift, a skewed jitter, chromatic noise from text-shadows and a 404 message with a glitching number.
Two copies of the text in cyan and magenta jitter sideways behind the real one, clipped to thin slices that jump around. The copies come from attr(data-text) in pseudo-elements, so the word appears once in the DOM and is read once.
A link that is perfectly calm until it is hovered or focused, then glitches for a fraction of a second with shifted colour copies. Running the effect only on interaction keeps the page readable and turns the glitch into feedback.
View code
<a class="gl2" href="#enter" data-text="Enter the site">Enter the site</a>
Green terminal text behind horizontal scanlines and a faint flicker, the look of an old CRT monitor. The scanlines are a repeating linear gradient in a pseudo-element, and the flicker is a small opacity change well below anything that could count as flashing.
Horizontal slices of the word slide sideways by different amounts for a few frames, then snap back. Three stacked copies each show one slice through clip-path and share a stepped animation, while the original word stays as the readable layer.
The whole word skews and shifts sharply for a moment every few seconds, like a dropped video frame. It uses steps(1) so each keyframe holds without easing, which gives the hard, digital feel that smooth easing would soften.
Red and blue text-shadows wobble around the word at slightly different rates, creating chromatic noise without any extra elements. The offsets are only a few pixels so the word stays perfectly readable.
A not-found message with a glitching 404, a plain-language explanation and a link home. The glitch is decoration on the number only; the heading text, the help and the link carry everything a visitor needs.
View code
<section class="gl7"><h3><span class="n" data-text="404" aria-hidden="true">404</span><span class="sr">Error 404:</span> Page not found</h3><p>The page may have moved. Try the home page or search.</p><a href="#home">Go to the home page</a></section>
Most glitches layer coloured copies of the text. Generate them with content: attr(data-text) in ::before and ::after, so the word exists once in the DOM and is read once.
Slices with clip-path
clip-path: inset(top 0 bottom 0) shows a horizontal band of a copy. Changing the band with steps(1) keyframes makes it jump between positions with the hard, digital feel a glitch needs.
Avoid flashing
Effects that flash more than three times a second can trigger seizures. Keep glitches to small areas and brief bursts with long pauses between them, and stop them under prefers-reduced-motion.
Glitch the decoration, not the message
Use the effect on a logo, a number or a heading, and keep the explanation and any links in plain, still text, as the 404 demo does.
Frequently asked questions
Do glitch effects need JavaScript?
No. Every demo here is pure CSS.
Why steps(1)?
It holds each keyframe without easing in between, so the shifts snap rather than slide.
Will the copies be read by screen readers?
Generated content can be read in some browsers, so the 404 demo also hides the decorated number and provides plain text.