Design Atlas
한국어
✦ Visual effects

Dithering

디더링

Scattering dots in a pattern to visually blend limited colours, hiding banding — also prized today for the gritty look of old-console graphics.

Also known as: Ordered ditheringBayer ditheringNoise dithering
···
html
<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>
css
.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}}

In palette-limited environments (8-bit consoles, GIF palettes) a smooth gradient is faked by alternating two colours in a grid pattern that the eye blends into an intermediate tone. A regular grid is "Bayer dithering"; using noise instead is "noise dithering."

On the web it's approximated by generating noise with an SVG feTurbulence filter and compositing it (feComposite) over the source to look like a dot pattern. It's seen a comeback lately as a deliberate retro texture on 3D/agency sites.

When to use

Use for retro-game moods, hiding banding in a WebGL gradient, or texture on a brutalist site. It’s too much for an ordinary UI background.