AAtomic CSS

text-shadow

텍스트에 그림자를 추가하는 속성입니다. box-shadow와 유사하지만 텍스트 자체에만 적용됩니다. 패턴 형식은 ts{X}px-{Y}px-{B}px-{HEX}입니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
tsntext-shadow: none그림자 제거
tsinhtext-shadow: inherit부모의 text-shadow 상속
tsinitext-shadow: initial초기값으로 리셋
tsutext-shadow: unset상속 또는 초기값
ts{X}px-{Y}px-{B}px-{HEX}text-shadow: Xpx Ypx Bpx #HEXX 오프셋, Y 오프셋, blur, 색상
ts{X}px-{Y}px-{B}px-{R}-{G}-{B}-{A}text-shadow: Xpx Ypx Bpx rgba()RGBA 색상 형식

시각적 비교

다양한 text-shadow 값을 적용한 텍스트를 비교합니다.

가벼운 그림자 — ts1px-1px-2px-000000

Hello World

중간 그림자 — ts2px-2px-4px-000000

Hello World

강한 그림자 — ts3px-3px-6px-000000

Hello World

인디고 글로우 — ts0px-0px-10px-6366F1

Hello World

강한 글로우 — ts0px-0px-20px-6366F1

Hello World

그림자 없음 (tsn) — tsn

Hello World

패턴 문법

text-shadow 패턴은 4개 값을 하이픈으로 연결합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">구성의미예시
{X}px수평 오프셋 (양수: 오른쪽)2px
{Y}px수직 오프셋 (양수: 아래)2px
{B}pxblur 반경 (0이면 선명한 그림자)4px
{HEX}6자리 HEX 색상000000
<!-- Pattern format -->
<!-- ts{Xoffset}px-{Yoffset}px-{blur}px-{Color} -->
<p class="ts2px-2px-4px-000000">X:2px Y:2px blur:4px black</p>

<!-- Glow (offset 0, blur only) -->
<p class="ts0px-0px-10px-6366F1 c6366F1">Neon glow</p>

네온 글로우 효과

blur 값을 크게 하고 밝은 색상을 사용하면 네온 글로우 효과를 만들 수 있습니다.

Indigo

Blue

Red

Green

코드 예시

<!-- Default Text Shadow -->
<h1 class="ts2px-2px-4px-000000 cFAFAFA fs3-2rem fw800">
  Title Text
</h1>

<!-- Neon glow effect -->
<p class="ts0px-0px-10px-6366F1 c6366F1 fs2-4rem fw700">
  Neon Glow
</p>

<!-- Remove shadow -->
<p class="tsn">Text without shadow</p>

<!-- Glow on hover (combined with transition) -->
<h2 class="cFAFAFA fs2rem fw700 tsn hover-ts0px-0px-10px-38BDF8 tall200msease cp">
  Glows on hover
</h2>

팁 & 주의사항

box-shadow와의 차이

text-shadow는 텍스트 글자 모양을 따라 그림자가 생기고, box-shadow는 요소의 박스 외곽에 그림자가 생깁니다.

RGBA 색상도 지원

HEX 대신 RGBA 형식도 사용 가능합니다. 예: ts2px-2px-4px-0-0-0-50은 반투명 검정 그림자입니다.

성능 고려

큰 blur 값의 text-shadow는 렌더링 비용이 높습니다. 많은 요소에 동시에 적용하면 스크롤 성능에 영향을 줄 수 있습니다.

box-shadowcolorfilterfont-sizeopacity