text-shadow 겹쳐 입체 글자 만드는 원리
배너 제목이나 로고 글자에 text-shadow를 하나 넣어봤는데, 뒤에 흐릿한 얼룩만 생길 뿐 글자가 튀어나온 입체감은 나지 않는 경우가 많습니다. 색을 진하게 키우거나 번짐을 늘려도 마찬가지입니다. 이건 그림자 하나로는 표현할 수 없는, 방향이 다른 그림자 두 겹을 겹쳐야 나는 효과이기 때문입니다.
요약 ① 그림자 한 겹은 글자 뒤의 흐림만 표현할 뿐, 튀어나온 입체감까지는 표현하지 못합니다 ② text-shadow는 콤마로 여러 값을 나열할 수 있고, 먼저 쓴 그림자가 위, 나중에 쓴 그림자가 아래로 겹쳐 그려집니다 ③ 밝은 방향의 옅은 그림자와 반대 방향의 진한 그림자를 함께 쌓으면, 광원 하나가 비추는 듯한 입체감이 생깁니다
그림자 한 겹으로는 왜 평면적으로만 보일까
text-shadow 값 하나는 글자 모양을 그대로 복제해 지정한 색으로 채운 뒤, 정해진 방향으로 밀어서 흐리게 깔아놓은 것에 불과합니다. 색을 아무리 진하게, 크게 줘도 이 원리 자체는 바뀌지 않습니다.
실제 물체가 튀어나와 보이는 것은 하나의 광원 아래에서 두 가지 단서가 동시에 나타나기 때문입니다. 광원 반대쪽 가장자리에는 그림자가 지고, 광원 쪽 가장자리에는 밝은 하이라이트가 생깁니다.
CSS 그림자 값 하나는 이 두 단서 중 어두운 쪽 하나만 표현합니다. 밝은 쪽 대비가 없으니 뇌는 이걸 튀어나온 글자가 아니라 그냥 흐릿한 배경 얼룩으로 읽습니다.
확인하는 방법 — 방향이 다른 그림자 두 겹 쌓기
text-shadow는 box-shadow처럼 콤마로 값을 여러 개 나열할 수 있습니다. 먼저 적은 그림자가 글자와 가장 가까운 위쪽 레이어가 되고, 나중에 적은 그림자일수록 그 아래에 깔립니다.
입체감을 내려면 이 두 겹의 방향을 서로 반대로 줘야 합니다. 광원이 왼쪽 위에 있다고 가정하면, 왼쪽 위 방향에는 밝은 색의 옅은 그림자로 하이라이트를, 오른쪽 아래 방향에는 어두운 색의 그림자로 그늘을 만듭니다.
두 값을 콤마로 이어 붙이면 예를 들어 text-shadow: -1px -1px 0 rgba(255,255,255,0.6), 2px 2px 3px rgba(0,0,0,0.35); 같은 모양이 됩니다. 왼쪽 위는 밝고 오른쪽 아래는 어둡게 대비되면서, 광원 하나가 위에서 비추는 듯한 입체감이 생깁니다.
로고나 배너 제목처럼 더 두꺼운 돌출감을 원하면, 어두운 방향의 그림자를 offset만 조금씩 키워가며 여러 겹 더 쌓아도 됩니다. 1px 1px, 2px 2px, 3px 3px처럼 같은 방향으로 조금씩 밀린 그림자를 이으면 글자 아래로 두꺼운 단면이 이어지는 돌출 효과가 만들어집니다.
저희 도구로 확인하기. 하이라이트 방향으로 슬라이더를 맞춰 값을 하나 만들어 복사하고, 다시 그림자 방향으로 슬라이더를 맞춰 또 하나를 만들어 복사하면 두 값을 눈으로 비교하며 원하는 대비를 빠르게 찾을 수 있습니다.
무료 · 가입 불필요 · 오프셋·번짐·색상 슬라이더로 text-shadow 값을 만들고 CSS 바로 복사
자주 막히는 지점
| 상황 | 원인 |
|---|---|
| 그림자를 진하게·크게 줘도 여전히 평면적 | 어두운 방향 그림자 한 겹뿐이라 밝은 쪽 대비가 없기 때문입니다 |
| 반대 방향으로 두 겹을 넣어도 입체감이 약함 | 밝은 쪽 그림자 색이 배경과 비슷해 대비가 눈에 잘 안 띄기 때문입니다 |
| 여러 겹을 넣었는데 순서를 바꿔도 그대로임 | offset·색이 비슷하면 레이어 순서 차이가 육안으로 거의 드러나지 않습니다 |
| 값을 이었는데 첫 그림자만 적용된 듯 보임 | 콤마 대신 세미콜론이 들어가 뒤 값이 별도 속성으로 끊겼을 가능성이 큽니다 |
정리
- 그림자 한 겹은 글자 뒤의 흐림만 표현할 뿐, 튀어나온 입체감은 표현하지 못합니다.
- 입체감은 광원 반대쪽의 어두운 그림자와 광원 쪽의 밝은 하이라이트, 두 대비가 동시에 있어야 뇌가 튀어나왔다고 읽습니다.
- text-shadow는 콤마로 여러 값을 나열할 수 있고, 먼저 쓴 그림자가 위, 나중에 쓴 그림자가 아래로 겹쳐 그려집니다.
- 방향이 반대인 밝은 그림자와 어두운 그림자를 하나씩 만들어 콤마로 이어 붙이면, 광원 하나가 비추는 듯한 입체 글자를 만들 수 있습니다.
무료 · 가입 불필요 · 오프셋·번짐·색상 슬라이더로 text-shadow 값을 만들고 CSS 바로 복사
자주 묻는 질문
그림자를 몇 겹까지 겹칠 수 있나요?
브라우저마다 사실상 제한이 거의 없어 여러 겹을 이어 붙일 수 있습니다. 다만 레이어가 많아질수록 값이 길어지므로, 입체감 표현에는 하이라이트 한 겹과 그림자 한두 겹 정도면 충분한 경우가 대부분입니다.
밝은 그림자를 넣었는데 배경과 겹쳐서 안 보입니다.
하이라이트 그림자 색이 배경색과 비슷하면 대비가 사라져 안 보이는 것처럼 느껴집니다. 배경보다 확실히 밝은 색으로 바꾸거나 불투명도를 높여서 대비를 키워야 합니다.
어느 방향으로 그림자를 줘야 자연스러운가요?
정해진 규칙은 없지만, 화면 왼쪽 위에서 빛이 내려온다고 가정하는 방식이 흔히 쓰입니다. 왼쪽 위에는 밝은 하이라이트를, 오른쪽 아래에는 어두운 그림자를 배치하면 대부분의 배경에서 자연스러운 입체감을 만들 수 있습니다.