Design Atlas
한국어
✦ Visual effects

Mask fade

마스크 페이드

Using a gradient as mask-image to erase an element’s edges into transparency — the classic "there’s more to scroll" signal.

Also known as: Edge fadeFade maskmask-image gradient
···
html
<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>
css
.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 dims a whole element uniformly, but mask-image: linear-gradient(...) uses the gradient's brightness as an alpha channel, erasing only part of it — near-white stays visible, near-black disappears.

Common for horizontal scroll carousels, long tag lists, or content that should fade out naturally as it scrolls under a header.

When to use

Use to soften the end of a list naturally. Some browsers still require the -webkit- prefix for mask-image.