Dithering with CSS

· web · Source ↗

CSS can apply noise dithering to images at render time using SVG filters, letting sites enforce a consistent aesthetic without pre-processing every asset.

What Matters

  • SVG feTurbulence with baseFrequency 0.90, numOctaves 1, and seed 2 generates the noise layer.
  • feComposite arithmetic mode blends noise into the image using k1–k4 coefficients (e.g., k2 0.75, k3 0.35).
  • Two-tone mode maps output to configurable dark/light values, enforcing strict palette conformance.
  • Runtime dithering trades processing flexibility for storage efficiency; pre-dithering assets remains faster at scale.

Original | Discuss on HN

Related coverage