mask-image

그라데이션과 모양으로 오려내기

마스크의 검은 부분은 보이고 투명한 부분은 잘려요. 가장자리 페이드/스포트라이트/모양 컷아웃을 CSS만으로.

아래로 갈수록 스르륵 사라져요

페이드 양 (아래쪽)

45%

값이 클수록 더 위에서부터 투명해져 넓게 사라져요.

적용된 CSS

mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;