작은 점들을 격자로 반복한 배경. 가장자리로 갈수록 옅어지도록 radial-gradient 마스크를 씌워 자연스럽게 흐려지게 만듭니다.
디자인 아틀라스<div class="dots"></div><div class="content"><strong>Dot pattern</strong><span>radial mask fade</span></div>.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}radial-gradient 점 하나를 background-image로 삼고 background-size로 간격을 정하면 격자 전체에 점이 반복됩니다(halftone과 같은 원리지만 크기가 균일하다는 점이 다릅니다). 이 배경 자체는 사각형 안에서 뚝 끊겨 보입니다.
여기에 mask-image: radial-gradient(...)를 겹치면 중앙은 불투명(점이 선명), 가장자리는 투명(점이 안 보임)으로 알파값이 부드럽게 이어져서, 점이 흩날리다 사라지는 듯한 자연스러운 경계가 생깁니다. 배경과 마스크는 서로 다른 레이어이니 마스크의 반경·모양만 바꿔 점의 "퍼짐 범위"를 자유롭게 조절할 수 있습니다.
카드나 섹션의 배경 텍스처로 깔아두고 그 위에 콘텐츠를 얹는 용도가 대부분이라, 애니메이션 없이 정적으로 써도 무방합니다.
기능 섹션·CTA 배경 텍스처로 씁니다. 점 색과 배경색의 대비를 낮게 유지해야 콘텐츠보다 튀지 않습니다.