색이 부족한 환경에서 점의 패턴으로 색을 섞어 보이게 해 계단 현상(밴딩)을 감추는 기법. 옛 게임기 그래픽 특유의 질감으로도 쓰입니다.
디자인 아틀라스<svg width="0" height="0"><filter id="dither" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch" result="n"/>
<feColorMatrix in="n" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0.6 0.6 0 -0.6" result="th"/>
<feComposite in="SourceGraphic" in2="th" operator="in"/>
</filter></svg>
<div class="wrap"><div class="grad"></div><div class="dots"></div></div>.wrap{position:relative;width:min(280px,82%);aspect-ratio:16/10;border-radius:12px;overflow:hidden}
.grad{position:absolute;inset:0;background:linear-gradient(135deg,#111,#eee)}
.dots{position:absolute;inset:0;background:#fff;filter:url(#dither);animation:tog 4s steps(1,end) infinite}
@keyframes tog{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}색상 수가 제한된 환경(8비트 게임기, GIF 팔레트)에서 부드러운 그라데이션을 표현하려면 두 색을 격자 패턴으로 번갈아 찍어 눈이 중간색으로 인식하게 만듭니다. 규칙적인 패턴을 쓰면 "Bayer 디더링", 노이즈를 쓰면 "노이즈 디더링"입니다.
웹에서는 SVG feTurbulence 로 만든 노이즈를 소스 위에 합성(feComposite)해 점 패턴처럼 보이게 근사합니다. 최근 3D·에이전시 사이트에서 복고 질감을 위해 의도적으로 쓰는 사례가 늘었습니다.
레트로 게임 무드, WebGL 그라데이션의 밴딩을 감출 때, 브루탈리즘 사이트의 질감으로 씁니다. 일반 UI 배경에는 과합니다.