여러 색상 점을 격자로 겹쳐 부드럽게 섞이는 다색 그라데이션. Stripe, Linear 같은 브랜드가 즐겨 씁니다.
디자인 아틀라스<div class="mesh"></div><span class="label">Mesh</span>.mesh{position:absolute;inset:-15%;background:
radial-gradient(at 20% 25%,#ff5c8a 0,transparent 50%),
radial-gradient(at 80% 15%,#5b5bf7 0,transparent 50%),
radial-gradient(at 15% 80%,#18c29c 0,transparent 50%),
radial-gradient(at 85% 85%,#ffb648 0,transparent 50%),
radial-gradient(at 50% 50%,#a855f7 0,transparent 60%);
filter:blur(6px) hue-rotate(0deg);animation:hue 14s linear infinite}
@keyframes hue{to{filter:blur(6px) hue-rotate(360deg)}}
.label{position:relative;color:#fff;font-size:32px;font-weight:800;letter-spacing:-.02em;text-shadow:0 2px 20px rgba(0,0,0,.35)}단일 gradient 로는 두 색만 섞이지만, 메시 그라데이션은 여러 개의 radial-gradient 를 서로 다른 위치·색으로 겹쳐 하나의 매끄러운 색면을 만듭니다. 각 gradient 가 transparent 로 끝나 서로 스며들듯 섞입니다.
전체에 hue-rotate 필터를 걸어 천천히 회전시키면 색이 흐르듯 바뀌는 느낌을 줄 수 있습니다. CSS 만으로는 진짜 삼각망(mesh) 보간은 불가능해 radial-gradient 여러 장을 겹치는 것으로 근사합니다 — Figma 의 Mesh Gradient 플러그인이나 CSS Houdini 로는 더 정교하게 만들 수 있습니다.
히어로 배경, OG 이미지, 브랜드 배경에 씁니다. 텍스트를 올릴 거면 밝고 어두운 영역이 고정돼 있지 않아 대비가 흔들리니 오버레이나 고정 텍스트 색을 준비하세요.