Glitch effect for websites
Torn color channels, slipping slices and pixels melted into streaks. How the glitch effect works, a CSS text glitch you can paste in, and the skills that build a full glitch-art hero.
Free skills to start. Pro is $79 a year for every skill, or $9.99 a month for 10. See pricing
What is a glitch effect?
A glitch effect makes an image or a line of text look like the signal broke. The tell-tale signs are color channels that split apart (red one way, cyan the other), horizontal slices that jump sideways, and in glitch art, rows of pixels sorted into long smears.
Used sparingly, it says music, fashion, games, security or anything with an edge. On a calm corporate page it reads as a bug, so it works best on one word, one image or one moment, not the whole site.
How the effect works
Text glitches are layering. Draw the same text three times: the real one, a cyan copy nudged left and a magenta copy nudged right. Then show only a thin horizontal band of each copy at a time, and move that band in steps rather than smoothly. The stepping is what makes it look broken instead of animated.
Pixel sorting is a different, more painterly glitch. Walk down each column of an image, find runs of pixels brighter than a threshold, and sort each run by brightness. The bright parts melt into vertical streaks while the dark parts stay put.
01
Split the channels
Two colored copies of the text, offset by a few pixels in opposite directions, give the RGB-split look.
02
Slice with clip-path
clip-path: inset(top 0 bottom 0) shows one band of each copy. Change the band at stepped keyframes.
03
Jitter on a rhythm
Long calm stretches and short bursts read as a glitch; constant motion reads as noise.
04
Sort pixels for glitch art
Per column, sort runs above a brightness threshold. Animate the threshold to make the melt sweep across.
HTML
An RGB split text glitch in CSS
Two colored copies from data-text, sliced by stepped clip-path keyframes. The animation stops for reduced motion and the real text stays selectable.
<h1 class="glitch" data-text="SIGNAL LOST">SIGNAL LOST</h1>
<style>
body { background: #0b0b0f; }
.glitch { position: relative; color: #fff; font: 800 clamp(40px, 9vw, 96px)/1 system-ui; letter-spacing: -0.02em; }
.glitch::before, .glitch::after {
content: attr(data-text);
position: absolute; inset: 0;
mix-blend-mode: screen;
pointer-events: none;
}
.glitch::before { color: #00f0ff; transform: translateX(-3px); animation: slice 2.6s steps(1) infinite; }
.glitch::after { color: #ff2bd6; transform: translateX(3px); animation: slice 2.6s steps(1) infinite reverse; }
@keyframes slice {
0%, 62%, 100% { clip-path: inset(0 0 100% 0); }
64% { clip-path: inset(12% 0 70% 0); transform: translateX(-8px); }
68% { clip-path: inset(48% 0 34% 0); transform: translateX(6px); }
72% { clip-path: inset(78% 0 6% 0); }
76% { clip-path: inset(30% 0 52% 0); transform: translateX(-4px); }
}
@media (prefers-reduced-motion: reduce) {
.glitch::before, .glitch::after { animation: none; clip-path: inset(0 0 100% 0); }
}
</style>A starting point written for this page, free to use in your own projects. The skills below build the finished version with checks, fallbacks and a recorded video.
What to get right on a real page
01
Keep it short
A burst of a few hundred milliseconds every couple of seconds is enough. A glitch that never stops makes headlines hard to read.
02
Watch for flashing
Fast full-screen flicker can trigger photosensitive seizures. Keep bursts small, avoid more than three flashes a second and never invert the whole screen rapidly.
03
Offer a calm version
Respect prefers-reduced-motion: show one finished frame instead of the loop. A visitor who turned motion off still gets the look.
04
Leave the real text alone
Put the glitch on pseudo-elements or a canvas and keep the heading as plain text, so search engines and screen readers read it once.
Skills that build a glitch effect
Each builds a finished hero with your headline, colors, fonts and buttons, and records a 1080p video of it.
- Pixel Sort Glitch HeroClaude CodeCodexCursor+3 more agents
Motion Heroes · Pro
Pixel Sort Glitch Hero
Animated canvas hero · page + embed + 1080p video
Real glitch art, not a filter: a dusk landscape is painted and genuinely pixel-sorted every frame. A sweep crosses it in vertical bands, the sky melts into sorted streaks and the sun pulls up into pillars of light, while thin slices slip and split in color.
Worth knowing: The landscape is generated, not your own photo, and the look is broken on purpose.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Pixel Sort Glitch Hero makes - CRT Terminal HeroClaude CodeCodexCursor+3 more agents
Motion Heroes · Pro
CRT Terminal Hero
Animated WebGL hero · page + embed + 1080p video
The analog side of a glitch: a curved CRT tube with scanlines, bloom, flicker and a rolling refresh band, switching on from a bright line and collapsing to a dot at the end of each loop.
Worth knowing: The screen plays a fixed boot script and takes no input.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what CRT Terminal Hero makes
Install
Build a glitch effect with your agent
Each skill is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses Pixel Sort Glitch Hero; each skill page has its own prompt.
1. Paste the install prompt
Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.
Install the "Pixel Sort Glitch Hero" skill from Lookbk (https://lookbk.dev/skills/pixel-sort-glitch-hero). 1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add pixel-sort-glitch-hero 2. If it prints a sign-in link, show it to me. When I say I approved it, run the same command again. 3. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.
Or run it in a terminal
curl -fsSL https://lookbk.dev/cli.js | node - add pixel-sort-glitch-hero2. Start a new session
Agents load skills when a session starts. The installer writes the folder where your agent looks:
- Claude Code
- ~/.claude/skills/pixel-sort-glitch-hero
- Codex
- ~/.agents/skills/pixel-sort-glitch-hero
- Cursor
- ~/.agents/skills/pixel-sort-glitch-hero
3. Ask for the result
Describe it in plain words, for example:
Build a Pixel Sort Glitch hero for Halfsleep Records, a slow electronic label: near-black page, violet and coral dusk landscape, headline 'Records for the last light.', caption 'HS-031 · Ferry Lights', and record a 12-second loop.
Another agent? Install a skill in any agent
FAQ
Questions
Still stuck? The guides cover installing, agents and licensing in more detail.
Read the guidesHow do I make a glitch text effect in CSS?
Put the text in a data attribute, draw it twice with ::before and ::after in two colors offset a few pixels, and animate clip-path: inset() on stepped keyframes so only thin bands show. The starter on this page does exactly that.
What is pixel sorting?
A glitch-art technique that sorts runs of pixels in each row or column by brightness. Bright areas smear into long streaks while dark areas hold, which looks like the image melted along one direction.
Can I glitch an image without JavaScript?
You can fake it with several copies of the image, each clipped to a band and shifted, plus mix-blend-mode for the color split. Real pixel sorting needs a canvas or shader that reads the pixels.
Is a glitch effect bad for accessibility?
It can be. Keep flashes under three a second, keep bursts small, honor prefers-reduced-motion and never glitch body text people need to read.