Guides · · Maxwell Prehoda
Glitch Effect CSS: 12 Examples, From the Original Pen to WebGL (and the Safety Rule Most Skip)
A CSS glitch effect is almost always the same trick: two extra copies of the element (usually ::before and ::after), shifted a couple of pixels and tinted red and cyan, then clipped into horizontal slices that jump around on a stepped keyframe. Change what gets copied and how the slices move, and you get RGB split, VHS tracking, CRT flicker or a cyberpunk tear.
This list traces the effect from the 2014 CodePen that started it to WebGL post-processing, with what each version is best for and what it costs. One rule applies to all of them: glitches flash, and the W3C's three-flashes limit is not optional. The live demos are our pure CSS versions of each pattern.
1. Lucas Bebber's Glitch pen, explained by CSS-Tricks: Best for understanding the classic RGB-split text glitch
Platform: CSS + Sass, CodePen
Chris Coyier's September 2014 CSS-Tricks article breaks down Lucas Bebber's Glitch pen, which he calls a "bonafide CSS trick". The element carries its text in a data-text attribute; ::before and ::after print it again, offset by 2 px and -2 px with red and blue text-shadow highlights, over an opaque background that hides the layers beneath.
Each copy is shown only through a clipping box whose top and bottom edges jump to random positions. The keyframes are generated in a Sass @for loop with random(), so every frame is a different slice. The article was updated in 2019 to use clip-path: inset() instead of the deprecated clip: rect(), and it includes mixins for images and inline SVG too.
Our Glitch Text below is a pure CSS version of the same structure: cyan and magenta copies flickering through clip-path slices.
Watch out for: The copies need an opaque background behind them to hide the original text, so this version breaks on images or gradients. Use mix-blend-mode or transparent copies if your background varies.
2. Codrops CSS Glitch Effect for images: Best for glitching photos and portraits on hover
Platform: CSS clip-path + animations
Codrops' 2017 CSS Glitch Effect applies the trick to images with CSS animations and clip-path, so bands of the picture shift and tear. The repo credits the technique to the speakers page of the 404 conference.
Image glitches suit portfolios, music and event sites where faces or artwork carry the page. They are also good on hover, where the effect is short and user-triggered rather than constant.
Our Glitch Image Hover below is a pure CSS version: color-shifted slices of the photo jump sideways while hovered.
Watch out for: The Codrops license allows use in your projects but not reselling or republishing the resource as is. Stacked image copies also multiply paint cost, so keep the image small.
3. PowerGlitch: Best for glitching any element with one function call
Platform: JavaScript library, MIT, under 2 KB
PowerGlitch glitches anything, text, images, buttons, by generating CSS animations for you rather than drawing on a canvas. It is under 2 KB minified and gzipped, has no dependencies and has React and Vue wrappers.
Its source defines four play modes: always, hover, click and manual. The defaults are sensible: in always mode the animation loops every 2 seconds but only glitches between 50% and 70% of each cycle; on hover or click it plays once for 250 ms. Options cover shake amplitude, slice count and height, hue rotation on slices, and a pulse.
Our Glitch Text Hover Effect below shows the hover mode in pure CSS: a calm word that breaks into jittering color slices only while hovered.
Watch out for: We found no reduced-motion handling in its main source file. Check prefers-reduced-motion yourself and skip the call, or use manual mode, for users who ask for less motion.
4. Alec Lownes's CSS CRT: Best for retro terminal and old-monitor looks
Platform: Pure CSS
This write-up builds a CRT screen from three layers. Scanlines are a linear-gradient with background-size: 100% 2px laid over the content with ::before. A very subtle RGB subpixel grid is a red, green and blue gradient at 3 px wide. Flicker is an opacity keyframe on ::after that changes every 0.15 s, and color separation is two offset text-shadows animated over 1.6 s.
It credits the scanlines and flicker to Lucas Bebber's CodePen work and the color separation to Andre Staltz's hyperpunk theme for the Hyper terminal. Together they make the effect read as hardware, not as a broken web page.
Our CRT Screen Text Effect below layers scanlines, a vignette, a faint flicker and a rolling bar in pure CSS.
Watch out for: The page carries no flicker warning, and fast opacity flicker is exactly what flash rules limit. Keep the flicker's brightness change small and switch it off under prefers-reduced-motion.
5. SVG displacement filters: Best for organic distortion and static, not neat slices
Platform: SVG filters (feTurbulence + feDisplacementMap)
Clip-path slices give a clean, digital tear. For the wobbly, analog kind of glitch, signal noise or a melting image, use an SVG filter: feTurbulence generates noise and feDisplacementMap uses that noise to push the pixels of your text or image around. Animating the filter's seed or scale makes the distortion move.
Apply it from CSS with filter: url(#id); in modern browsers it works on HTML elements, not only on SVG.
Our No Signal Static Text below uses one inline SVG turbulence filter for the TV static behind a flickering label.
Watch out for: Filters are repainted every frame and can be expensive on large areas. Use them on a small element, and test on a phone before putting one over a full-width hero.
6. augmented-ui: Best for cyberpunk HUD frames to put glitches inside
Platform: CSS library, BSD 2-Clause
Glitch effects often come with sci-fi framing: cut corners, notched borders, angled tabs. augmented-ui does that part in pure CSS. Add preset names to a data-augmented-ui attribute, or configure shapes through --aug- custom properties; version 2 has 200 region mixins and a Mixin Mixer tool to browse them.
Pair it with a short glitch on hover or on state change and you get the game-UI look without drawing any SVG.
Our Cyberpunk Glitch Text below is a self-contained version: a corner-cut yellow label whose inverted slices tear sideways every few seconds.
Watch out for: Heavy framing plus constant glitching wears out quickly. Keep the frames static and let only one element glitch at a time.
7. baffle.js text scramble: Best for decoding text reveals and hacker-style loading
Platform: JavaScript library, about 1.8 KB, no dependencies
baffle is a tiny library for obfuscating and revealing text: start it on an element and the characters churn through random symbols, then call reveal(1500) to settle on the real text over 1.5 seconds. It is about 1.8 KB gzipped and dependency free.
Scrambles are the glitch's quieter cousin. They read as "decoding" rather than "broken", which makes them a good fit for loading states, data reveals and terminal-style hero text.
Our Scramble Text Loader below does it in pure CSS: each letter of LOADING flickers through symbols before it locks in.
Watch out for: While scrambling, the element's text is nonsense to screen readers. Put the real text in an aria-label or a visually hidden copy.
8. WebGL glitch: three.js GlitchPass and React Postprocessing: Best for glitching a whole 3D scene or canvas
Platform: three.js / @react-three/postprocessing
When the thing glitching is a 3D scene, CSS cannot reach it. three.js ships a GlitchPass post-processing pass that displaces the rendered frame using a generated texture of digital glitch squares, with a goWild flag that noticeably increases the intensity.
In React, @react-three/postprocessing has a Glitch effect with readable controls: delay between glitches (1.5 to 3.5 s by default), duration (0.6 to 1 s), strength, a ratio between weak and strong glitches (0.85), columns for the block size and an active prop to switch it off.
Use it for game sites, music visuals and product reveals that already run in WebGL.
Watch out for: Full-frame glitches are full-screen flashes. Keep the strength low, lengthen the delay, and wire the active prop to prefers-reduced-motion.
9. Our VHS Glitch Text Effect: Best for retro video, music and nostalgia brands
Platform: Motions directory, free, HTML + CSS Ours
An on-screen VCR label with red and blue chroma bleed, a nervous horizontal wobble and a noisy tracking band that rolls through it, in monospaced type. It reads as tape damage rather than digital corruption, which is a different mood from RGB split.
It is pure CSS with a prefers-reduced-motion guard and colour and size custom properties. For the full camcorder look, add our VHS Camcorder REC Timestamp.
Watch out for: VHS effects rely on low contrast and blur. Use them for a short label or title card, never for text people need to read at length.
10. Our Glitch Burst Text: Best for a glitch that stays out of the way
Platform: Motions directory, free, HTML + CSS Ours
The word sits perfectly still, then breaks up for a split second, jolting and skewing while colored slices fly off, and snaps back clean. Most of each cycle is calm, which is the single biggest improvement you can make to any glitch.
It follows the same rule as PowerGlitch's default always mode, glitching for a small part of each loop instead of constantly. The glitch text collection has the other variants: RGB split, scanline and datamosh.
Watch out for: Do not shorten the calm part to make it more exciting. Constant glitching becomes flashing, and flashing is where the accessibility limits start.
11. Our 404 Glitch Text: Best for error pages with personality
Platform: Motions directory, free, HTML + CSS Ours
A big 404 whose digits glitch one at a time, jumping, skewing and splitting into red and cyan, above a quiet PAGE NOT FOUND line. A broken page is the one place where a broken-looking effect is literally on message.
Pair it with a clear way home, a search box and a link to your main sections. Our 404 page guide has more ideas.
Watch out for: The animation is decoration; the recovery links are the page. Make sure they are visible and focusable before the digits finish their first glitch.
How to choose a glitch effect
Three questions, and one rule.
Match the glitch to the mood
Digital and techy: RGB split with clip-path slices, the classic. Nostalgic: VHS chroma bleed or a CRT. Analog and eerie: SVG displacement noise. Decoding: a scramble like baffle. Game UI: cyberpunk tears inside angled frames. Pick one; mixing three glitch styles on a page reads as a bug.
Match the tool to what is glitching
Text and buttons: pure CSS pseudo-elements, no library. Photos: stacked clip-path copies like Codrops'. Many different elements with one API: PowerGlitch. A WebGL scene: three.js GlitchPass or React Postprocessing. Use the lightest option that reaches the thing you want to break.
Respect the flash limit
WCAG 2.3.1 says pages must not contain anything that flashes more than three times in any one second, unless it stays under the flash thresholds. Glitches are flashes. Keep bursts short and rare, keep brightness changes small, avoid saturated red flashing, and stop the effect under prefers-reduced-motion.
Add one glitch and keep the rest calm
Choose one element, a logo, a 404, a hover on one button, and give it a short glitch that happens rarely. That reads as intentional; a page that glitches everywhere reads as broken.
Copy a ready one from the glitch text collection, or describe the exact glitch you want and get the CSS back.
Make a glitch effect for a heading, pure CSS using ::before and ::after copies of the text from a data-text attribute. The heading sits still for 3.5 s, then glitches for 300 ms: copies offset 3 px in cyan and magenta, clipped into 3 horizontal slices that jump with steps(1). No more than 3 flashes in any second and no full-screen brightness change. Under prefers-reduced-motion, show the plain heading with no glitch.
Common questions
How do you make a glitch effect in CSS?
Duplicate the text with ::before and ::after (reading it from a data-text attribute), offset the copies a few pixels in red and cyan, and animate clip-path: inset() on each copy with stepped keyframes so different horizontal slices show. Add a short transform jitter for extra shake.
Can you glitch an image with CSS only?
Yes. Stack copies of the image, cut each with clip-path, and shift the slices sideways on a stepped animation, as Codrops' CSS Glitch Effect does. For organic distortion, apply an SVG feTurbulence and feDisplacementMap filter with CSS filter: url().
Are glitch effects bad for accessibility?
They can be. WCAG 2.3.1 limits flashing to three times in any one second unless it stays under the general and red flash thresholds. Keep glitches brief and infrequent, avoid large bright or red flashes, and turn them off under prefers-reduced-motion.
Is there a JavaScript library for glitch effects?
PowerGlitch (under 2 KB, MIT) glitches any element with play modes for always, hover, click and manual. baffle.js handles text scramble reveals. For WebGL scenes, three.js has GlitchPass and React Postprocessing has a Glitch effect.
What is the difference between a glitch and an RGB split?
RGB split, or chromatic aberration, is one ingredient: color copies offset from the original. A full glitch adds slicing and jumps, so parts of the element shift or disappear for a moment. Many effects combine both.