한 줄 요약 - mask-image는 그라데이션이나 도형을 스텐실(본뜨는 틀)로 써서 요소의 일부만 보이게 합니다. 마스크의 검은(불투명) 부분은 보이고, 투명한 부분은 잘려서 안 보여요.
이럴 때 필요해요
이미지 아래쪽을 부드럽게 흐려 다음 콘텐츠와 자연스럽게 잇고 싶을 때, border-radius로는 안 되는 곡선이나 별/하트 같은 모양으로 콘텐츠를 오려내고 싶을 때, 또는 가운데만 환하게 비추는 스포트라이트가 필요할 때 답이 됩니다. opacity 그라데이션을 위에 덧대는 옛날 방식은 배경이 단색일 때만 통하지만, 마스크는 그 아래가 무엇이든 진짜로 잘라내요.
어떻게 동작하나
마스크로 쓸 그라데이션이나 도형(SVG)을 준비합니다. 검은색은 보일 영역, 투명은 잘릴 영역이라고 보면 됩니다.
요소에 mask-image로 그 마스크를 씌우면, 검은 부분이 덮은 자리만 콘텐츠가 비치고 투명한 부분은 사라집니다.
linear-gradient(black, transparent)면 위는 또렷하고 아래로 갈수록 스르륵 사라지고, radial-gradient면 원 안만 남는 스포트라이트가 됩니다.
핵심은 이거예요
마스크는 '색'이 아니라 '불투명도'로 보이고 안 보이고를 정합니다. 검은(불투명) 곳은 통과, 투명한 곳은 차단 - 이 한 가지만 기억하면 페이드든 스포트라이트든 모양 컷아웃이든 전부 같은 원리예요.
놓치기 쉬운 것
사파리(웹킷)는 아직 -webkit-mask- 접두사가 필요해서, 표준 속성과 -webkit- 속성을 늘 함께 적어야 합니다. 하나만 적으면 한쪽 브라우저에서 효과가 통째로 사라져요.
mask-repeat: no-repeat와 mask-size를 안 주면 마스크가 타일처럼 반복되거나 크기가 안 맞아 의도와 다르게 보일 수 있어요.
이런 곳에 써요
긴 목록/카드 하단을 페이드 처리해 '스크롤하면 더 있어요'를 암시 (목록 하단 그라데이션 컷오프).
히어로 이미지를 비대칭 곡선이나 로고 모양으로 오려내는 브랜드 비주얼, 마우스 따라가는 스포트라이트 효과.