CSS text-shadow 다루기 — 그림자·네온·외곽선 효과
제목 한 줄에 입체감을 주거나, 사진 위 글자를 또렷하게 만들거나, 간판처럼 번쩍이는 네온을 흉내 내는 일 — 전부 text-shadow 하나로 됩니다. 값 네 개의 구조만 익히면 그다음은 조합 놀이입니다. 문법부터 자주 쓰는 효과까지 차례로 정리했습니다.
기본 문법 — 값 네 개
text-shadow는 가로 오프셋 · 세로 오프셋 · 블러 · 색 순서로 적습니다. 예를 들어 text-shadow: 2px 2px 4px rgba(0,0,0,.4); 는 오른쪽 아래로 2px씩 밀린 곳에 4px만큼 번진 반투명 검정 그림자를 그립니다.
| 값 | 의미 | 비고 |
|---|---|---|
| 가로 오프셋(x) | 그림자가 좌우로 밀리는 거리 | 양수=오른쪽, 음수=왼쪽 |
| 세로 오프셋(y) | 그림자가 위아래로 밀리는 거리 | 양수=아래, 음수=위 |
| 블러(blur) | 그림자가 번지는 정도 | 생략 가능(기본 0=선명) |
| 색(color) | 그림자 색 | 생략 시 글자색 기준 |
그림자 여러 겹 쌓기
그림자는 콤마(,)로 구분해 여러 개를 한 속성에 넣을 수 있습니다. 먼저 적은 그림자가 위에, 나중 그림자가 아래에 깔립니다. text-shadow: 1px 1px 0 #888, 2px 2px 0 #aaa; 처럼 색을 단계적으로 두면 글자가 계단처럼 두꺼워지는 입체 효과가 납니다. 네온·외곽선 같은 효과는 모두 이 "여러 겹 쌓기"에서 출발합니다.
네온·외곽선·가독성 그림자
| 효과 | 핵심 | 예시 값 |
|---|---|---|
| 네온(글로우) | 오프셋 0 + 블러만 키운 같은 색을 여러 겹 | 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff |
| 외곽선 흉내 | 블러 0인 1px 그림자를 사방 네 방향 | 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000 |
| 가독성 그림자 | 옅고 짧은 어두운 그림자 하나 | 0 1px 3px rgba(0,0,0,.5) |
네온은 글자색을 밝게(흰색에 가깝게) 두고, 같은 색 그림자의 블러만 점점 키워 겹치면 빛이 번지는 느낌이 강해집니다. 외곽선은 곡선이 다소 거칠어 두꺼운 선에는 한계가 있고, 1px 정도의 얇은 테두리나 폴백용으로 알맞습니다. 가독성 그림자는 사진·그라데이션 배경 위 글자를 또렷하게 만드는 가장 흔한 용도로, 너무 진하면 촌스러우니 옅게 한 겹만 주는 것이 깔끔합니다.
box-shadow와의 차이
- 대상이 다릅니다 — text-shadow는 글자 모양을, box-shadow는 사각형 박스 테두리를 따라 그립니다.
- 옵션이 다릅니다 — box-shadow에는 안쪽 그림자(inset)와 퍼짐(spread) 값이 있지만, text-shadow에는 없습니다.
- 쓰임이 다릅니다 — 글자에 입체감·네온을 줄 때는 text-shadow, 카드·버튼을 띄울 때는 box-shadow.
박스 그림자가 궁금하면 생성기로 text-shadow 값을 먼저 잡아 보고, 박스 쪽은 별도 가이드를 참고하세요.
text-shadow는 글자(텍스트) 자체의 모양을 따라 그림자를 그리고, box-shadow는 요소의 사각형 박스 테두리를 따라 그림자를 그립니다. 그래서 글자에 입체감이나 네온을 줄 때는 text-shadow를, 카드·버튼 같은 박스를 띄울 때는 box-shadow를 씁니다. text-shadow에는 inset(안쪽 그림자)과 퍼짐(spread) 값이 없다는 점도 차이입니다.
오프셋을 0으로 두고 블러만 키운 같은 색 그림자를 콤마로 여러 겹 쌓으면 됩니다. 예를 들어 글자색을 흰색에 가깝게 두고 0 0 5px, 0 0 10px, 0 0 20px처럼 블러를 점점 키운 같은 색 그림자를 겹치면 빛이 번지는 네온 느낌이 납니다. 겹을 늘릴수록 더 밝고 강하게, 색을 통일할수록 깔끔하게 빛납니다.
블러 0인 1px 그림자를 상하좌우 네 방향으로 콤마로 나열하면 외곽선 흉내를 낼 수 있습니다. 다만 곡선 부분이 살짝 거칠고 두꺼운 선에는 한계가 있어, 정확한 외곽선이 필요하면 -webkit-text-stroke 속성이 더 깔끔합니다. text-shadow 방식은 간단한 1px 테두리나 폴백용으로 적합합니다.