text-shadow

CSS Reference

text-shadow는 글자에 그림자를 추가합니다. 가로·세로 오프셋과 선택적인 흐림 반경, 색을 지정하며 여러 그림자는 쉼표로 겹칠 수 있습니다. box-shadow와 달리 확산 거리와 inset은 사용하지 않습니다.

문법과 주요 값

속성	초기값	상속	주요 적용 조건
`text-shadow`	none	예	모든 요소; 실제 그림·텍스트·상자의 존재 조건은 본문에서 확인

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.title { text-shadow: 2px 3px 4px rgb(0 0 0 / 35%); }

값 또는 구분	동작과 선택 기준
`첫 두 길이`	가로·세로 이동; 음수 값으로 반대 방향
`세 번째 길이`	흐림 반경; 음수는 불가
`색`	생략하면 currentColor가 사용됨
`쉼표 / none`	여러 그림자 / 그림자 없음

값과 적용 조건은 MDN text-shadow에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 text-shadow-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>text-shadow 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { font-size: 30px; color: #006c9c; }
.target { text-shadow: 2px 3px 4px rgb(0 0 0 / 35%); }
.reference { text-shadow: none; }
</style>
</head>
<body>
<main id="demo">
<h1>text-shadow 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">그림자 있음</p><div class="target">그림자 CSS</div></div><div class="b"><p class="label">none</p><div class="reference">그림자 CSS</div></div></section>
</main>
</body>
</html>

첫 예문의 글자 오른쪽 아래에 흐린 그림자가 보이고 두 번째 예문에는 없습니다. 그림자가 글자 폭과 줄 높이를 직접 늘리지는 않습니다.

여러 레이어와 선명한 윤곽

쉼표로 여러 그림자를 지정하면 앞에 쓴 그림자가 위에 그려집니다. 흐림 없이 반대 방향의 작은 오프셋을 조합하면 윤곽처럼 보일 수 있지만 지나치게 많은 레이어는 글자 형태를 흐릴 수 있습니다. 실제 작은 크기와 모바일 화면에서도 읽을 수 있는지 확인하세요.

사진 위 텍스트의 대비

그림자는 배경과 텍스트를 구별하는 보조 표현일 뿐 충분한 대비를 항상 보장하지 않습니다. 배경 밝기가 변하는 사진에는 배경 패널이나 명확한 색 대비를 검토하고, 중요한 내용을 장식 효과에만 의존하지 않도록 합니다. 상위 overflow가 그림자를 자를 수도 있습니다.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

기존 .target의 그림자에서 흐림 4px만 0으로 바꾸고 되돌립니다. 선명한 원문과 흐린 그림자를 각각 읽을 수 있는지 확인합니다.
그림자 두 개를 쉼표로 넣고 순서만 바꾸어 겹치는 부분을 비교합니다. 사진 위 텍스트는 그림자만으로 대비를 보장하지 않으므로 대체 배경 패널이나 글자색도 검사합니다.

관련 조건은 WCAG 텍스트 대비 기준에서 확인할 수 있습니다.

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 box-shadow입니다.

적용되지 않거나 예상과 다를 때

그림자 값에 box-shadow의 spread나 inset을 넣지 않았는지 확인합니다.
번짐이 크면 먼저 흐림 반경과 알파 값을 줄여 비교합니다.

CSS Reference