Design Atlas
한국어
▞ Patterns & textiles

Polka dot

폴카 도트

Evenly sized circles staggered half a step between rows — named after the polka dance craze that swept 1880s Europe and America.

Also known as: 물방울무늬Dotted fabric
···
html
<div class="pd"></div><span class="tag">polka dot</span>
css
.pd{position:absolute;inset:0;background-color:#e7e2d3;
  background-image:
    radial-gradient(circle,#d1476b 40%,transparent 42%),
    radial-gradient(circle,#d1476b 40%,transparent 42%);
  background-size:44px 44px,44px 44px;
  background-position:0 0,22px 22px;
  animation:pan 10s linear infinite}
@keyframes pan{to{background-position:0 44px,22px 66px}}
.tag{position:absolute;left:10px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(90,20,40,.82);
  color:#f7ecec;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em}

Dotted fabric itself is older, but the name "polka dot" locked in during the 1880s, when a polka dance craze that had swept Europe since the 1840s got slapped onto every product imaginable. Printing or weaving evenly spaced, evenly sized dots required precise machinery, so it only became a common, affordable pattern once mass production caught up.

The key structural fact is that the repeat unit isn't a plain square grid — it's rows staggered by half a step. That offset is what makes the spacing feel even in every direction and reads as a proper polka dot; a straight square grid of dots draws the eye to the grid before the dots.

It's easy to confuse with the effects-category dot-pattern, but the use case differs. That one is a small, uniform grid faded out at the edges with a mask, built for UI backgrounds. Polka dot is the larger, higher-contrast, edge-to-edge repeat used in fabric and fashion.

When to use

Use for dress or packaging texture and a retro/kitsch mood. For a UI background, dot-pattern's edge-masked version is the better fit.