Design Atlas
한국어
✦ Visual effects

Dot pattern

도트 패턴

A grid of small repeated dots, faded toward the edges with a radial-gradient mask so it dissolves naturally instead of cutting off.

Also known as: Dotted backgroundRadial-fade dot grid
···
html
<div class="dots"></div><div class="content"><strong>Dot pattern</strong><span>radial mask fade</span></div>
css
.dots{position:absolute;inset:0;
  background-image:radial-gradient(var(--fg) 1.4px,transparent 1.4px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 40% 60% at 50% 45%,#000 0%,#000 8%,transparent 90%);
  mask-image:radial-gradient(ellipse 40% 60% at 50% 45%,#000 0%,#000 8%,transparent 90%);opacity:.55}
.content{position:relative;text-align:center;display:grid;gap:4px}
.content strong{color:var(--fg);font-size:18px}
.content span{color:var(--muted);font-size:12px}

Use a single radial-gradient dot as background-image and set the spacing with background-size, and it repeats into a grid of dots (the same idea as halftone, except every dot is the same size). On its own, that background stops abruptly at the rectangle's edge.

Layer mask-image: radial-gradient(...) on top and the alpha fades smoothly — opaque (dots visible) at the centre, transparent (dots gone) toward the edges — so the pattern reads as naturally dissolving rather than cut off. Since the mask is a separate layer, changing only its radius or shape freely controls how far the dots spread.

Most often it sits as static background texture behind a card or section, with content placed on top — it works fine with no animation at all.

When to use

Use as background texture behind a feature or CTA section. Keep the dot-to-background contrast low so it never outshines the content.