Expressive & trend · 2010s – present
Glitch
Colour channel separation, pixelated tears, horizontal shift bands, and the beautiful accidents that happen when digital signals break down.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(9% 0.01 270) - --fg
oklch(94% 0 0) - --muted
oklch(58% 0.04 270) - --surface
oklch(13% 0.02 270) - --surface-2
oklch(17% 0.03 270) - --border
oklch(33% 0.06 270) - --accent
oklch(62% 0.3 25) - --accent-fg
oklch(9% 0.01 270) - --focus
oklch(78% 0.22 192)
| Token | Value |
|---|---|
| --font-body | ui-monospace, 'Courier New', monospace |
| --font-display | 'VT323', ui-monospace, monospace |
| --font-mono | ui-monospace, 'Courier New', monospace |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | 3px 0 oklch(78% 0.22 192 / 0.5), -3px 0 oklch(62% 0.3 25 / 0.5) |
| --shadow-lg | 6px 0 12px oklch(78% 0.22 192 / 0.3), -6px 0 12px oklch(62% 0.3 25 / 0.3) |
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
:root {
--bg: oklch(9% 0.01 270);
--fg: oklch(94% 0 0);
--muted: oklch(58% 0.04 270);
--surface: oklch(13% 0.02 270);
--surface-2: oklch(17% 0.03 270);
--border: oklch(33% 0.06 270);
--accent: oklch(62% 0.3 25);
--accent-fg: oklch(9% 0.01 270);
--focus: oklch(78% 0.22 192);
--font-body: ui-monospace, 'Courier New', monospace;
--font-display: 'VT323', ui-monospace, monospace;
--font-mono: ui-monospace, 'Courier New', monospace;
--radius: 0px;
--radius-sm: 0px;
--shadow: 3px 0 oklch(78% 0.22 192 / 0.5), -3px 0 oklch(62% 0.3 25 / 0.5);
--shadow-lg: 6px 0 12px oklch(78% 0.22 192 / 0.3), -6px 0 12px oklch(62% 0.3 25 / 0.3);
}Where it came from
Origin: Digital art, circuit bending, compressed video corruption
Glitch art grew from practitioners who deliberately corrupt image and audio files to expose the aesthetics of failure. Circuit bending (hardware manipulation), datamoshing (video compression artefacts), and RGB channel offsetting all contribute techniques. It entered mainstream design through music video aesthetics and became a go-to tool for any brand wanting to seem transgressive or edgy.
How to spot it
- RGB channel offset (chromatic aberration)
- Horizontal tear bands and pixel scramble
- Scanline and compression artefact overlays
- Interrupted, displaced, or doubled type
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Immediately distinctive and arresting | Readability suffers significantly |
| Strong metaphor for disruption and digital culture | Overused in music and entertainment marketing |
| Looks complex with simple CSS techniques | Motion-heavy versions fail prefers-reduced-motion |
In the wild
- Late-2000s datamoshed music videos
- Tumblr-era net art, 2012–2015
- Various games using digital horror aesthetics
Use it when
Music, art, horror, or tech brands that want to signal disruption and digital anxiety.