Design Atlas
한국어
✦ Visual effects

Halftone

하프톤

A dot pattern that mimics how print reproduces tone with varying dot size — the pop-art, newsprint look.

Also known as: Dot patternPrint dotsBen-Day dots
···
html
<div class="wrap"><div class="photo"></div><div class="dots"></div></div>
css
.wrap{position:relative;width:min(300px,85%);aspect-ratio:4/3;border-radius:12px;overflow:hidden}
.photo{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,#fff,#666 60%,#111 100%)}
.dots{position:absolute;inset:0;mix-blend-mode:multiply;
  background-image:radial-gradient(circle,#0b0b0f 42%,transparent 43%);background-size:9px 9px;
  animation:zoom 5s ease-in-out infinite}
@keyframes zoom{0%,100%{background-size:9px 9px}50%{background-size:13px 13px}}

Originally a printing workaround — presses couldn't reproduce continuous photographic tone, so dark areas got large dots and light areas small ones, and the eye blended them (1880s newspaper printing).

On the web it's approximated by tiling a radial-gradient dot into a grid. A more precise version maps an image's brightness to actual dot size with an SVG pattern and feComponentTransfer.

When to use

Use for pop-art/comic illustration, a reprinted-newsprint mood. Laid over small text it badly hurts legibility.