Tailwind CSS v4.1 유틸리티 정리: text-shadow와 mask 사용하기

• Tailwind CSS v4.1에서 효과 유틸리티가 눈에 띄는 이유
• text-shadow는 글자를 꾸미기보다 배경에서 분리하는 보정에 가깝다
• mask 유틸리티는 잘라내기보다 보이는 범위를 설계하는 방식이다
• 실제 UI에서 text-shadow와 mask를 고르는 기준
• 효과가 과해지는 지점과 줄이는 기준
• 정리

Tailwind CSS v4.1에서 효과 유틸리티가 눈에 띄는 이유

Tailwind CSS로 화면을 만들 때 간격, 색상, 폰트 크기는 대부분 유틸리티 클래스로 바로 처리됩니다. 그런데 배경 이미지 위에 제목을 얹거나, 썸네일 아래쪽을 자연스럽게 흐리게 만드는 작업은 그동안 별도 CSS로 빠지는 경우가 많았습니다. 단순히 모양을 더하는 작업처럼 보여도 실제로는 가독성과 화면 연결감에 영향을 주는 부분입니다.

Tailwind CSS v4.1에서 추가된 text-shadow-*와 mask-*는 이런 빈틈을 줄여주는 유틸리티입니다. text-shadow는 글자가 배경에 묻히지 않도록 보정하고, mask는 이미지나 배경이 갑자기 끊겨 보이지 않게 보이는 영역을 조절합니다.

다만 둘 다 눈에 잘 띄는 효과라서 무작정 넣으면 화면이 빠르게 무거워집니다. 카드 하나만 볼 때는 괜찮아도, 상품 목록이나 관리자 화면처럼 같은 요소가 반복되는 곳에서는 그림자와 마스크가 계속 쌓여 전체 UI가 산만해질 수 있습니다.

그래서 먼저 잡아야 할 기준은 클래스 이름이 아닙니다. 텍스트가 배경과 충돌하는지, 이미지 경계가 너무 딱딱한지, 같은 효과가 여러 번 반복됐을 때 부담스럽지 않은지를 먼저 봐야 합니다. 그다음에 text-shadow와 mask를 선택하면 효과가 장식으로 흐르지 않습니다.

text-shadow는 글자를 꾸미기보다 배경에서 분리하는 보정에 가깝다

text-shadow를 글자 장식 기능으로만 보면 강한 그림자를 먼저 고르게 됩니다. 하지만 실제 작업에서는 반대로 접근하는 편이 낫습니다. 배경 이미지 위에 흰색 제목을 올렸는데 특정 구간에서 글자가 흐려 보일 때, 오버레이와 텍스트 색상으로 먼저 조정하고 그래도 부족할 때 약한 텍스트 그림자를 더합니다.

Tailwind CSS v4.1 기준으로는 text-shadow-2xs, text-shadow-xs, text-shadow-sm, text-shadow-md, text-shadow-lg처럼 크기를 나누어 쓸 수 있습니다. 제거가 필요할 때는 text-shadow-none을 사용합니다. 이 값들은 단계가 올라갈수록 무조건 좋아지는 구조가 아닙니다. 제목 크기, 배경의 복잡도, 텍스트와 배경의 대비에 따라 적당한 값이 달라집니다.

배경 이미지 위 제목에 약한 그림자를 넣는 예시

<section class="relative overflow-hidden rounded-3xl bg-[url('/images/hero.jpg')] bg-cover bg-center p-8">
    <div class="absolute inset-0 bg-black/30"></div>

    <div class="relative max-w-xl">
        <p class="text-sm font-medium text-white/80">Spring Collection</p>
        <h1 class="mt-3 text-4xl font-bold text-white text-shadow-md text-shadow-black/40">
            계절감이 살아나는 카드형 배너
        </h1>
        <p class="mt-4 text-base text-white/85">
            배경 이미지가 복잡할수록 제목과 배경을 살짝 분리하는 보정이 필요합니다.
        </p>
    </div>
</section>

여기서 text-shadow-md는 제목을 입체적으로 만드는 장치라기보다 배경과 텍스트 사이에 얇은 완충층을 만드는 역할입니다. text-shadow-black/40처럼 색상과 투명도를 함께 지정하면 그림자가 과하게 떠 보이는 문제를 줄일 수 있습니다.

긴 본문에는 같은 방식을 그대로 적용하지 않는 편이 낫습니다. 문장이 길어질수록 그림자는 선명함보다 번짐으로 보일 가능성이 커집니다. 텍스트 그림자는 히어로 제목, 배너 카피, 짧은 버튼 문구처럼 길이가 짧고 배경의 영향을 크게 받는 요소에 제한하는 쪽이 안정적입니다.

다크 모드에서는 그림자를 빼야 할 때도 있다

<h2 class="text-3xl font-bold text-zinc-950 text-shadow-sm text-shadow-zinc-300/70 dark:text-white dark:text-shadow-none">
    요금제 비교
</h2>

라이트 모드에서는 밝은 배경 위 진한 텍스트에 아주 연한 그림자가 맞을 수 있습니다. 반대로 다크 모드에서는 배경과 텍스트 대비가 이미 충분한 경우가 많습니다. 그 상태에서 그림자를 유지하면 글자 가장자리가 뿌옇게 보일 수 있으므로 dark:text-shadow-none처럼 조건부로 제거하는 선택도 필요합니다.

mask 유틸리티는 잘라내기보다 보이는 범위를 설계하는 방식이다

mask는 처음 보면 overflow-hidden이나 clip-path와 비슷해 보입니다. 하지만 실제 쓰임은 다릅니다. overflow-hidden은 넘친 부분을 끊어내고, clip-path는 특정 형태로 잘라냅니다. mask는 어느 부분을 보이게 두고 어느 부분을 투명하게 보낼지 조절합니다.

카드 썸네일 아래쪽을 부드럽게 흐리게 만들거나, 히어로 이미지가 오른쪽으로 갈수록 사라지게 만들거나, 프로필 이미지의 중앙만 강조하고 싶을 때 mask-* 계열을 검토할 수 있습니다. 원본 이미지를 편집하지 않고 화면에서 보이는 방식만 바꿀 수 있다는 점이 장점입니다.

카드 썸네일 아래쪽을 자연스럽게 흐리게 처리하기

<article class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm">
    <div class="h-56 bg-[url('/images/product.jpg')] bg-cover bg-center mask-b-from-70% mask-b-to-100%"></div>

    <div class="p-5">
        <p class="text-sm font-medium text-zinc-500">New Item</p>
        <h3 class="mt-2 text-xl font-semibold text-zinc-950">부드러운 이미지 카드</h3>
        <p class="mt-2 text-sm leading-6 text-zinc-600">
            이미지 끝부분이 갑자기 끊기는 느낌을 줄이고 카드 본문으로 자연스럽게 이어지게 만듭니다.
        </p>
    </div>
</article>

mask-b-from-70%는 아래 방향으로 마스크 효과가 시작되는 지점을 정하는 식으로 읽으면 됩니다. b는 bottom 방향이고, from과 to는 흐려지는 구간의 시작과 끝을 나눕니다. 이 기준을 잡으면 mask-t-*, mask-r-*, mask-l-*도 방향만 바꿔 읽을 수 있습니다.

mask-x-*와 mask-y-*는 양쪽 방향을 함께 다룰 때 사용합니다. 가로로 긴 배너의 좌우 끝을 흐리게 만들고 싶다면 mask-x-from-70%, mask-x-to-95% 같은 조합을 검토할 수 있습니다. 세로 스크롤 영역의 위아래 끝을 부드럽게 처리할 때는 mask-y-* 계열이 더 자연스럽습니다.

radial mask는 특정 지점에 시선을 모을 때 어울린다

<div class="flex items-center gap-5 rounded-3xl border border-zinc-200 bg-zinc-50 p-5">
    <img
        class="size-28 rounded-2xl object-cover mask-radial-from-70% mask-radial-to-100% mask-radial-at-center"
        src="/images/profile.jpg"
        alt="프로필 썸네일"
    />

    <div>
        <p class="text-xs font-semibold uppercase text-blue-600">Profile</p>
        <h3 class="mt-2 text-lg font-bold text-zinc-950">중앙을 강조하는 프로필 카드</h3>
        <p class="mt-1 text-sm leading-6 text-zinc-600">
            이미지 가장자리는 덜어내고 중앙 인물이나 제품에 시선을 모읍니다.
        </p>
    </div>
</div>

radial mask는 원형에 가까운 범위로 보이는 영역을 조절합니다. 프로필 이미지, 제품 클로즈업, 기능 소개 카드처럼 중심 피사체가 분명한 이미지에 어울립니다. 반대로 일반 썸네일 목록 전체에 반복해서 쓰면 의도보다 장식성이 강해질 수 있습니다.

실제 UI에서 text-shadow와 mask를 고르는 기준

두 유틸리티는 모두 효과 계열이지만 문제를 해결하는 위치가 다릅니다. text-shadow는 텍스트와 배경이 충돌할 때 검토합니다. mask는 이미지나 배경의 경계가 너무 딱딱하게 끊길 때 검토합니다. 둘을 동시에 쓸 수는 있지만, 같은 영역에 효과가 여러 개 겹치면 의도가 흐려집니다.

상황	먼저 볼 유틸리티	판단 기준
배경 이미지 위 제목	text-shadow-sm, text-shadow-md	글자가 배경에 묻히는지, 오버레이만으로 해결되는지 확인합니다.
카드 썸네일 하단 fade	mask-b-from-*, mask-b-to-*	이미지와 본문 영역이 갑자기 끊겨 보이는지 확인합니다.
가로 배너 양끝 흐림	mask-x-from-*, mask-x-to-*	배너가 주변 배경과 자연스럽게 이어져야 하는지 확인합니다.
프로필 또는 제품 중심 강조	mask-radial-*	중앙 피사체가 명확하고 가장자리를 덜어내도 되는지 확인합니다.

히어로 배너라면 보통 배경 이미지, 오버레이, 텍스트 색상, 텍스트 그림자를 순서대로 확인합니다. 처음부터 강한 그림자를 넣으면 배경도 텍스트도 모두 어색해질 수 있습니다. 오버레이와 색상으로 큰 대비를 잡고, 특정 구간에서만 글자가 묻힐 때 text-shadow를 추가하는 흐름이 낫습니다.

카드 썸네일에서는 텍스트보다 이미지 경계가 먼저 눈에 걸릴 때가 많습니다. 이미지가 카드 상단을 꽉 채우고 바로 본문으로 이어질 때, 하단 경계가 뚝 끊겨 보이면 mask-b-* 계열이 후보가 됩니다. 다만 목록형 UI에서는 한 장의 카드가 아니라 여러 카드가 동시에 보이는 상태에서 확인해야 합니다.

효과가 과해지는 지점과 줄이는 기준

효과 유틸리티는 적용 결과가 바로 보이기 때문에 “조금 더”를 반복하기 쉽습니다. text-shadow-md가 약해 보이면 text-shadow-lg로 올리고, 색상도 더 진하게 만들고, 배경에는 다시 마스크를 넣는 식입니다. 그렇게 쌓이면 개별 요소는 그럴듯해도 화면 전체의 밀도가 높아집니다.

text-shadow는 글자를 선명하게 만들려고 넣었는데 글자 가장자리가 번져 보이면 줄여야 합니다. 특히 작은 글자, 긴 문장, 테이블 내부 텍스트에는 거의 맞지 않습니다. 제목에도 강한 그림자를 넣기 전에 text-shadow-sm이나 text-shadow-md 정도에서 먼저 확인하는 흐름이 낫습니다.

mask는 클래스 조합이 길어지는 순간 한 번 멈춰볼 필요가 있습니다. mask-b-from-70%처럼 단순한 edge mask는 마크업 안에 두어도 읽을 수 있습니다. 하지만 radial, custom size, mask position, 반복 제어까지 한 요소에 몰리면 나중에 수정할 때 의도를 파악하기 어렵습니다.

복잡해진 mask는 CSS 변수나 별도 규칙으로 분리할 수 있다

<div class="mask-[url('/images/noise-mask.png')] mask-cover bg-[url('/images/hero.jpg')] bg-cover bg-center">
    <div class="min-h-96 p-8">
        <h2 class="text-4xl font-bold text-white text-shadow-md text-shadow-black/40">
            마스크 이미지를 사용한 히어로 영역
        </h2>
    </div>
</div>

이미지 파일을 마스크로 쓰는 경우에는 mask-[url(...)], mask-cover, mask-contain 같은 조합이 등장합니다. 이 정도는 마크업에서 읽을 수 있지만, 같은 효과가 여러 곳에서 반복된다면 프로젝트 전용 유틸리티나 컴포넌트 클래스로 분리하는 편이 유지보수에 유리합니다.

브라우저 확인도 빼면 안 됩니다. Tailwind v4 계열은 최신 CSS 기능을 적극적으로 사용합니다. v4.1에서 호환성 개선이 들어갔더라도, 마스크처럼 시각 표현에 영향을 주는 기능은 실제 타깃 브라우저에서 확인해야 합니다. 운영 중인 서비스가 오래된 모바일 WebView나 특정 사내 브라우저까지 고려해야 한다면 더 보수적으로 적용하는 것이 맞습니다.

정리

Tailwind CSS v4.1의 text-shadow-*는 글자를 꾸미는 클래스라기보다 배경과 텍스트가 충돌할 때 쓰는 보정 도구입니다. 크기를 올리기 전에 색상, 투명도, 다크 모드 제거 조건까지 같이 확인해야 실제 화면에서 덜 어색합니다.

mask-*는 이미지나 배경의 경계를 설계하는 유틸리티입니다. 아래, 위, 좌우, 중심처럼 어느 방향에서 보이는 영역을 조절할지 먼저 정하면 클래스 이름도 덜 복잡하게 읽힙니다. 단순한 fade는 마크업 안에서 처리하고, 반복되거나 복잡한 효과는 별도 규칙으로 분리하는 기준을 남겨두면 수정할 때 덜 흔들립니다.

두 기능 모두 화면을 빠르게 세련되게 만들 수 있지만, 많이 넣는다고 완성도가 올라가지는 않습니다. 배너 제목이 배경에 묻히는지, 이미지 경계가 너무 딱딱한지, 목록으로 반복했을 때 효과가 과해지지 않는지부터 확인하면 실무에서 쓸 만한 기준이 생깁니다.

참고 자료로는 Tailwind CSS v4.1 릴리스 노트와 Tailwind CSS 공식 문서의 text-shadow, mask-image, mask-mode, mask-size 설명을 기준으로 기능 범위와 클래스 사용 방식을 확인했습니다.