mask-image 에 그라데이션을 넣어 요소의 가장자리를 투명하게 지우는 기법. 스크롤 리스트의 "더 있음" 신호로 흔히 씁니다.
디자인 아틀라스<div class="row"><div class="track">
<span class="chip">Design</span><span class="chip">Motion</span><span class="chip">Color</span><span class="chip">Layout</span><span class="chip">Type</span><span class="chip">UX</span><span class="chip">3D</span><span class="chip">Glow</span>
<span class="chip">Design</span><span class="chip">Motion</span><span class="chip">Color</span><span class="chip">Layout</span><span class="chip">Type</span><span class="chip">UX</span><span class="chip">3D</span><span class="chip">Glow</span>
</div></div>.row{width:min(320px,88%);overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.track{display:flex;gap:10px;width:max-content;animation:scroll 9s linear infinite}
.chip{padding:8px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);
color:var(--fg);font-size:13px;white-space:nowrap}
@keyframes scroll{to{transform:translateX(-50%)}}opacity 는 전체를 균일하게 흐리지만, mask-image: linear-gradient(...) 는 그라데이션의 밝기를 알파값으로 써서 부분적으로만 지웁니다. 흰색(불투명)에 가까울수록 보이고, 검정(투명)에 가까울수록 사라집니다.
가로 스크롤 캐러셀, 긴 태그 목록, 헤더 아래로 스크롤되는 콘텐츠가 자연스럽게 사라지는 느낌을 줄 때 씁니다.
리스트 끝을 자연스럽게 감출 때 씁니다. 일부 브라우저는 mask-image 에 -webkit- 접두사가 여전히 필요합니다.