AAtomic CSS

text-shadow

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

클래스 목록

클래스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개 값을 하이픈으로 연결합니다.

구성의미예시
{X}px수평 오프셋 (양수: 오른쪽)2px
{Y}px수직 오프셋 (양수: 아래)2px
{B}pxblur 반경 (0이면 선명한 그림자)4px
{HEX}6자리 HEX 색상000000
<!-- 패턴 형식 -->
<!-- ts{X오프셋}px-{Y오프셋}px-{blur}px-{색상} -->
<p class="ts2px-2px-4px-000000">X:2px Y:2px blur:4px 검정</p>

<!-- 글로우 (오프셋 0, blur만 사용) -->
<p class="ts0px-0px-10px-6366F1 c6366F1">네온 글로우</p>

네온 글로우 효과

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

Indigo

Blue

Red

Green

코드 예시

<!-- 기본 텍스트 그림자 -->
<h1 class="ts2px-2px-4px-000000 cFAFAFA fs3-2rem fw800">
  제목 텍스트
</h1>

<!-- 네온 글로우 효과 -->
<p class="ts0px-0px-10px-6366F1 c6366F1 fs2-4rem fw700">
  Neon Glow
</p>

<!-- 그림자 제거 -->
<p class="tsn">그림자 없는 텍스트</p>

<!-- 호버 시 글로우 (transition과 조합) -->
<h2 class="cFAFAFA fs2rem fw700 tsn hover-ts0px-0px-10px-38BDF8 tall200msease cp">
  호버하면 빛남
</h2>

팁 & 주의사항

box-shadow와의 차이

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

RGBA 색상도 지원

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

성능 고려

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

box-shadowcolorfilterfont-sizeopacity