Mask Image
Mask Image
요소의 마스크 이미지(mask-image)를 정해주는 유틸리티예요. 이미지 마스크부터 선형·방사형·원뿔형 그라데이션 마스크까지 다양한 방식으로 요소를 마스킹할 수 있어요.
출처: 문서
본문
ClassStyles
이미지 마스크와 그라데이션 마스크를 만드는 핵심 유틸리티는 다음과 같아요 (<number>는 --spacing 스케일, <percentage>는 백분율, <color>는 색상 토큰).
mask-[<value>] mask-image: <value>;
mask-(<custom-property>) mask-image: var(<custom-property>);
mask-none mask-image: none;
/* 선형(linear) 그라데이션 마스크 */
mask-linear-<number> mask-image: linear-gradient(<number>deg, black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));
-mask-linear-<number> mask-image: linear-gradient(calc(<number>deg * -1), black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));
mask-linear-from-<number> mask-image: linear-gradient(var(--tw-mask-linear-position), black calc(var(--spacing) * <number>), transparent var(--tw-mask-linear-to));
mask-linear-from-<percentage> mask-image: linear-gradient(var(--tw-mask-linear-position), black <percentage>, transparent var(--tw-mask-linear-to));
mask-linear-from-<color> mask-image: linear-gradient(var(--tw-mask-linear-position), <color> var(--tw-mask-linear-from), transparent var(--tw-mask-linear-to));
mask-linear-from-(<custom-property>) mask-image: linear-gradient(var(--tw-mask-linear-position), black <custom-property>, transparent var(--tw-mask-linear-to));
mask-linear-from-[<value>] mask-image: linear-gradient(var(--tw-mask-linear-position), black <value>, transparent var(--tw-mask-linear-to));
mask-linear-to-<number> mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent calc(var(--spacing) * <number>));
mask-linear-to-<percentage> mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent <percentage>);
mask-linear-to-<color> mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), <color> var(--tw-mask-linear-to));
mask-linear-to-(<custom-property>) mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent var(<custom-property>));
mask-linear-to-[<value>] mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent <value>);
/* 각 면(위/오른쪽/아래/왼쪽) 마스크 */
mask-t-from-<number> mask-image: linear-gradient(to top, black calc(var(--spacing) * <number>), transparent var(--tw-mask-top-to));
mask-t-from-<percentage> mask-image: linear-gradient(to top, black <percentage>, transparent var(--tw-mask-top-to));
mask-t-from-<color> mask-image: linear-gradient(to top, <color> var(--tw-mask-top-from), transparent var(--tw-mask-top-to));
mask-t-from-(<custom-property>) mask-image: linear-gradient(to top, black var(<custom-property>), transparent var(--tw-mask-top-to));
mask-t-from-[<value>] mask-image: linear-gradient(to top, black <value>, transparent var(--tw-mask-top-to));
mask-t-to-<number> mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing) * <number>));
mask-t-to-<percentage> mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <percentage>);
mask-t-to-<color> mask-image: linear-gradient(to top, black var(--tw-mask-top-from), <color> var(--tw-mask-top-to));
mask-t-to-(<custom-property>) mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent var(<custom-property>));
mask-t-to-[<value>] mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <value>);
mask-r-from-<number> mask-image: linear-gradient(to right, black calc(var(--spacing) * <number>), transparent var(--tw-mask-right-to));
mask-r-from-<percentage> mask-image: linear-gradient(to right, black <percentage>, transparent var(--tw-mask-right-to));
mask-r-from-<color> mask-image: linear-gradient(to right, <color> var(--tw-mask-right-from), transparent var(--tw-mask-right-to));
mask-r-from-(<custom-property>) mask-image: linear-gradient(to right, black var(<custom-property>), transparent var(--tw-mask-right-to));
mask-r-from-[<value>] mask-image: linear-gradient(to right, black <value>, transparent var(--tw-mask-right-to));
mask-r-to-<number> mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing) * <number>));
mask-r-to-<percentage> mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <percentage>);
mask-r-to-<color> mask-image: linear-gradient(to right, black var(--tw-mask-right-from), <color> var(--tw-mask-right-to));
mask-r-to-(<custom-property>) mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent var(<custom-property>));
mask-r-to-[<value>] mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <value>);
mask-b-from-<number> mask-image: linear-gradient(to bottom, black calc(var(--spacing) * <number>), transparent var(--tw-mask-bottom-to));
mask-b-from-<percentage> mask-image: linear-gradient(to bottom, black <percentage>, transparent var(--tw-mask-bottom-to));
mask-b-from-<color> mask-image: linear-gradient(to bottom, <color> var(--tw-mask-bottom-from), transparent var(--tw-mask-bottom-to));
mask-b-from-(<custom-property>) mask-image: linear-gradient(to bottom, black var(<custom-property>), transparent var(--tw-mask-bottom-to));
mask-b-from-[<value>] mask-image: linear-gradient(to bottom, black <value>, transparent var(--tw-mask-bottom-to));
mask-b-to-<number> mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing) * <number>));
mask-b-to-<percentage> mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <percentage>);
mask-b-to-<color> mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), <color> var(--tw-mask-bottom-to));
mask-b-to-(<custom-property>) mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent var(<custom-property>));
mask-b-to-[<value>] mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <value>);
mask-l-from-<number> mask-image: linear-gradient(to left, black calc(var(--spacing) * <number>), transparent var(--tw-mask-left-to));
mask-l-from-<percentage> mask-image: linear-gradient(to left, black <percentage>, transparent var(--tw-mask-left-to));
mask-l-from-<color> mask-image: linear-gradient(to left, <color> var(--tw-mask-left-from), transparent var(--tw-mask-left-to));
mask-l-from-(<custom-property>) mask-image: linear-gradient(to left, black var(<custom-property>), transparent var(--tw-mask-left-to));
mask-l-from-[<value>] mask-image: linear-gradient(to left, black <value>, transparent var(--tw-mask-left-to));
mask-l-to-<number> mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing) * <number>));
mask-l-to-<percentage> mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent <percentage>);
mask-l-to-<color> mask-image: linear-gradient(to left, black var(--tw-mask-left-from), <color> var(--tw-mask-left-to));
mask-l-to-(<custom-property>) mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent var(<custom-property>));
mask-l-to-[<value>] mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent <value>);
/* 가로/세로 두 면 동시 마스크 (mask-composite: intersect) */
mask-y-from-<value> / mask-y-to-<value> → to top + to bottom 두 그라데이션 결합, mask-composite: intersect
mask-x-from-<value> / mask-x-to-<value> → to right + to left 두 그라데이션 결합, mask-composite: intersect
/* 방사형(radial) 그라데이션 마스크 */
mask-radial-[<value>] mask-image: radial-gradient(<value>);
mask-radial-[<size>] --tw-mask-radial-size: <size>;
mask-radial-[<size>_<size>] --tw-mask-radial-size: <size> <size>;
mask-radial-from-<number> mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black calc(var(--spacing) * <number>), transparent var(--tw-mask-radial-to));
mask-radial-from-<percentage> mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black <percentage>, transparent var(--tw-mask-radial-to));
mask-radial-from-<color> mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), <color> var(--tw-mask-radial-from), transparent var(--tw-mask-radial-to));
mask-radial-from-(<custom-property>) mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(<custom-property>), transparent var(--tw-mask-radial-to));
mask-radial-from-[<value>] mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black <value>, transparent var(--tw-mask-radial-to));
mask-radial-to-<number> mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent calc(var(--spacing) * <number>));
mask-radial-to-<percentage> mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent <percentage>);
mask-radial-to-<color> mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), <color> var(--tw-mask-radial-to));
mask-radial-to-(<custom-property>) mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent var(<custom-property>));
mask-radial-to-[<value>] mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent <value>);
mask-circle --tw-mask-radial-shape: circle;
mask-ellipse --tw-mask-radial-shape: ellipse;
mask-radial-closest-corner --tw-mask-radial-size: closest-corner;
mask-radial-closest-side --tw-mask-radial-size: closest-side;
mask-radial-farthest-corner --tw-mask-radial-size: farthest-corner;
mask-radial-farthest-side --tw-mask-radial-size: farthest-side;
mask-radial-at-top-left --tw-mask-radial-position: top left;
mask-radial-at-top --tw-mask-radial-position: top;
mask-radial-at-top-right --tw-mask-radial-position: top right;
mask-radial-at-left --tw-mask-radial-position: left;
mask-radial-at-center --tw-mask-radial-position: center;
mask-radial-at-right --tw-mask-radial-position: right;
mask-radial-at-bottom-left --tw-mask-radial-position: bottom left;
mask-radial-at-bottom --tw-mask-radial-position: bottom;
mask-radial-at-bottom-right --tw-mask-radial-position: bottom right;
/* 원뿔형(conic) 그라데이션 마스크 */
mask-conic-<number> mask-image: conic-gradient(from <number>deg, black var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to));
-mask-conic-<number> mask-image: conic-gradient(from calc(<number>deg * -1), black var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to));
mask-conic-from-<number> mask-image: conic-gradient(from var(--tw-mask-conic-position), black calc(var(--spacing) * <number>), transparent var(--tw-mask-conic-to));
mask-conic-from-<percentage> mask-image: conic-gradient(from var(--tw-mask-conic-position), black <percentage>, transparent var(--tw-mask-conic-to));
mask-conic-from-<color> mask-image: conic-gradient(from var(--tw-mask-conic-position), <color> var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to));
mask-conic-from-(<custom-property>) mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(<custom-property>), transparent var(--tw-mask-conic-to));
mask-conic-from-[<value>] mask-image: conic-gradient(from var(--tw-mask-conic-position), black <value>, transparent var(--tw-mask-conic-to));
mask-conic-to-<number> mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent calc(var(--spacing) * <number>));
mask-conic-to-<percentage> mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent <percentage>);
mask-conic-to-<color> mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), <color> var(--tw-mask-conic-to));
mask-conic-to-(<custom-property>) mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent var(<custom-property>));
mask-conic-to-[<value>] mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent <value>);
예시 (Examples)
이미지 마스크 사용하기 (Using an image mask)
mask-[<value>] 문법을 사용하면 요소의 마스크 이미지를 설정할 수 있어요.
<div class="mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ...">
<!-- ... -->
</div>
가장자리 마스킹하기 (Masking edges)
mask-b-from-<value>, mask-t-to-<value> 같은 유틸리티를 사용하면 요소의 한 면에 선형 그라데이션 마스크를 추가할 수 있어요.
<div class="mask-t-from-50% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-r-from-30% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-l-from-50% mask-l-to-90% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-b-from-20% mask-b-to-80% bg-[url(/img/mountains.jpg)] ..."></div>
추가로 mask-x-from-70%, mask-y-to-90% 같은 유틸리티를 사용하면 요소의 두 면에 동시에 마스크를 적용할 수 있어요.
<div class="mask-x-from-70% mask-x-to-90% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-y-from-70% mask-y-to-90% bg-[url(/img/mountains.jpg)] ..."></div>
기본적으로 선형 그라데이션 마스크는 검정에서 투명으로 전환되지만, mask-<side>-from-<color>와 mask-<side>-to-<color> 유틸리티로 그라데이션 색상을 커스터마이징할 수 있어요.
각진 선형 마스크 추가하기 (Adding an angled linear mask)
mask-linear-<angle>, mask-linear-from-20, mask-linear-to-40 같은 유틸리티를 사용하면 요소에 사용자 정의 선형 그라데이션 마스크를 추가할 수 있어요.
<div class="mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="-mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ..."></div>
방사형 마스크 추가하기 (Adding a radial mask)
mask-radial-from-<value>와 mask-radial-to-<value> 유틸리티를 사용하면 요소에 방사형 그라데이션 마스크를 추가할 수 있어요.
<div class="flex items-center gap-4">
<img class="mask-radial-[100%_100%] mask-radial-from-75% mask-radial-at-left ..." src="/img/keyboard.png" />
<div class="font-medium">
<p class="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">Speed</p>
<p class="mt-2 text-base text-gray-700 dark:text-gray-300">Built for power users</p>
<p class="mt-1 text-sm leading-relaxed text-balance text-gray-500">
Work faster than ever with customizable keyboard shortcuts
</p>
</div>
</div>
기본적으로 방사형 그라데이션 마스크는 검정에서 투명으로 전환되지만, mask-radial-from-<color>와 mask-radial-to-<color> 유틸리티로 그라데이션 색상을 커스터마이징할 수 있어요.
방사형 위치 설정하기 (Setting the radial position)
mask-radial-at-bottom-left, mask-radial-at-[35%_35%] 같은 유틸리티를 사용하면 방사형 그라데이션 마스크의 중심 위치를 설정할 수 있어요.
<div class="mask-radial-at-top-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-top mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-top-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-center mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-bottom-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-bottom mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-bottom-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
이것은 방사형 그라데이션이 아닌 마스크 이미지 자체의 위치를 설정하는 mask-position과는 다르다는 점에 주의하세요.
방사형 크기 설정하기 (Setting the radial size)
mask-radial-closest-corner, mask-radial-farthest-side 같은 유틸리티를 사용하면 방사형 그라데이션 마스크의 크기를 설정할 수 있어요.
<div class="mask-radial-closest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-closest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-farthest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-farthest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>
사용자 정의 방사형 그라데이션 크기를 설정할 때 사용할 수 있는 단위는 기본값이 ellipse인 그라데이션의 <ending-shape>에 따라 달라져요.
mask-circle에서는 mask-radial-[5rem]처럼 단일 고정 길이만 사용할 수 있어요. 반면 mask-ellipse에서는 mask-radial-[40%_80%]처럼 각 축을 고정 길이나 백분율로 지정할 수 있어요.
원뿔형 마스크 추가하기 (Adding a conic mask)
mask-conic-from-<value>, mask-conic-to-<value>, mask-conic-<angle> 유틸리티를 사용하면 요소에 원뿔형 그라데이션 마스크를 추가할 수 있어요.
<div class="flex items-center gap-5 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5 dark:bg-gray-800">
<div class="grid grid-cols-1 grid-rows-1">
<div class="border-4 border-gray-100 dark:border-gray-700 ..."></div>
<div class="border-4 border-amber-500 mask-conic-from-75% mask-conic-to-75% dark:border-amber-400 ..."></div>
</div>
<div class="w-0 flex-1 text-sm text-gray-950 dark:text-white">
<p class="font-medium">Storage used: 75%</p>
<p class="mt-1 text-gray-500 dark:text-gray-400"><span class="font-medium">0.48 GB</span> out of 2 GB remaining</p>
</div>
</div>
기본적으로 원뿔형 그라데이션 마스크는 검정에서 투명으로 전환되지만, mask-conic-from-<color>와 mask-conic-to-<color> 유틸리티로 그라데이션 색상을 커스터마이징할 수 있어요.
마스크 결합하기 (Combining masks)
mask-radial-from-<value>, mask-conic-to-<value>, mask-l-from-<value> 같은 그라데이션 마스크 유틸리티는 서로 결합해 더 복잡한 그라데이션 마스크를 만들 수 있어요.
<div class="mask-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-r-from-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% bg-[url(/img/mountains.jpg)] ..."></div>
이 동작은 Tailwind가 기본적으로 mask-composite 속성을 intersect로 설정한다는 점에 기반해요. 이 속성을 변경하면 그라데이션 마스크가 결합되는 방식에 영향을 줘요.
마스크 이미지 제거하기 (Removing mask images)
mask-none 유틸리티를 사용하면 요소에 적용된 기존 마스크 이미지를 제거할 수 있어요.
<div class="mask-none">
<!-- ... -->
</div>
사용자 정의 값 사용하기 (Using a custom value)
mask-linear-[<value>], mask-radial-[<value>] 같은 유틸리티를 사용하면 완전히 사용자 정의한 값으로 마스크 이미지를 정할 수 있어요.
<div class="mask-linear-[70deg,transparent_10%,black,transparent_80%] ...">
<!-- ... -->
</div>
CSS 변수를 사용할 때는 mask-linear-(<custom-property>) 문법도 쓸 수 있어요.
<div class="mask-linear-(--my-mask) ...">
<!-- ... -->
</div>
이것은 mask-linear-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 붙여주는 것뿐이에요.
반응형 디자인 (Responsive design)
mask-image 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<div class="mask-radial-from-70% md:mask-radial-from-50% ...">
<!-- ... -->
</div>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.
테마 커스터마이징 (Customizing your theme)
--color-* 테마 변수를 사용하면 프로젝트의 색상 유틸리티를 커스터마이징할 수 있어요.
@theme {
--color-regal-blue: #243c5a;
}
이제 mask-radial-from-regal-blue, mask-conic-to-regal-blue, mask-b-from-regal-blue 같은 유틸리티를 마크업에서 사용할 수 있어요.
<div class="mask-radial-from-regal-blue">
<!-- ... -->
</div>
테마를 커스터마이징하는 방법을 더 알아보려면 theme 문서를 확인해 보세요.