Halftone Background
Print style halftone dots that swell and shrink as soft bands roll across the page. A dot gradient is multiplied with the moving bands, then filter: contrast() snaps it into crisp dots.
Also known as: halftone pattern css, halftone dots animation, comic dots background.
HTML
<div class="bgx-halftone-dots" aria-hidden="true"> <span class="bgx-halftone-dots-ink"><i></i></span> </div>
CSS
.bgx-halftone-dots {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--band: 18em;
container-type: size;
isolation: isolate;
background: #fff;
}
.bgx-halftone-dots-ink {
position: absolute;
inset: 0;
background: radial-gradient(closest-side, #444, #fff) 0 0 / 0.9em 0.9em;
filter: contrast(20);
}
.bgx-halftone-dots-ink > i {
position: absolute;
top: 50%;
left: 50%;
width: calc(150cqmax + var(--band) * 2);
height: calc(150cqmax + var(--band) * 2);
margin: calc(-75cqmax - var(--band)) 0 0 calc(-75cqmax - var(--band));
background: repeating-linear-gradient(90deg, #999 0, #fff calc(var(--band) / 2), #999 var(--band));
mix-blend-mode: multiply;
animation: bgx-halftone-dots-roll 6s linear infinite;
}
.bgx-halftone-dots::after {
content: "";
position: absolute;
inset: 0;
background: var(--c);
mix-blend-mode: screen;
}
@keyframes bgx-halftone-dots-roll {
from { transform: rotate(-30deg) translateX(0); }
to { transform: rotate(-30deg) translateX(calc(var(--band) * -1)); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-halftone-dots, .bgx-halftone-dots *, .bgx-halftone-dots::before, .bgx-halftone-dots::after, .bgx-halftone-dots *::before, .bgx-halftone-dots *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.