Design Atlas
한국어
✦ Visual effects

Glitch

글리치

Text or image slices momentarily jump out of alignment and colours split, as if the screen briefly corrupted.

Also known as: Digital glitchDatamosh text
···
html
<div class="g" id="g" data-text="GLITCH">GLITCH</div>
css
.g{position:relative;font-size:clamp(32px,8vmin,46px);font-weight:800;color:#fff;letter-spacing:.04em}
.g::before,.g::after{content:attr(data-text);position:absolute;inset:0;mix-blend-mode:screen;opacity:0}
.g::before{color:#ff2d55}
.g::after{color:#22d3ee}
.g.burst::before{opacity:1;animation:gb .32s steps(6) 1}
.g.burst::after{opacity:1;animation:gb2 .32s steps(6) 1}
@keyframes gb{
  0%{clip-path:inset(10% 0 70% 0);transform:translate(-6px,0)}
  30%{clip-path:inset(60% 0 10% 0);transform:translate(5px,0)}
  60%{clip-path:inset(20% 0 50% 0);transform:translate(-3px,0)}
  100%{clip-path:inset(0 0 0 0);transform:translate(0,0)}}
@keyframes gb2{
  0%{clip-path:inset(70% 0 5% 0);transform:translate(6px,0)}
  40%{clip-path:inset(5% 0 60% 0);transform:translate(-4px,0)}
  100%{clip-path:inset(0 0 0 0);transform:translate(0,0)}}
js
const g = document.getElementById('g');
function burst() {
  g.classList.add('burst');
  setTimeout(() => g.classList.remove('burst'), 320);
  setTimeout(burst, 1600 + Math.random() * 1400);
}
burst();

Slice the element into horizontal bands with clip-path, jump each band sideways briefly on its own timing, and add a red/cyan channel split — the result reads as digital corruption. A steps() easing keeps the motion jerky rather than smooth, which sells the effect.

Randomness is the point, so pure CSS keyframes repeat the same pattern every cycle — in practice you'd randomise the interval and offsets with JS instead.

When to use

Use for error states, cyberpunk/Y2K moods, short intro transitions. It can trigger photosensitive seizures — keep frequency and intensity low and avoid repeated exposure.