- 가로·세로 위치로 그림자가 떨어지는 방향을 정합니다.
- 번짐과 투명도로 또렷한 그림자부터 부드러운 빛번짐까지 조절합니다.
- 그림자 색과 글자 색을 골라 미리보기로 확인합니다.
- "CSS 복사"로 text-shadow 코드를 복사해 붙여 넣습니다.
text-shadow는 가로 세로 번짐 색 순서로 적습니다. 앞의 두 값은 그림자가 떨어지는 방향, 세 번째는 퍼지는 정도, 마지막은 색입니다. 이 네 가지를 조합해 또렷한 그림자부터 부드러운 빛번짐까지 만들 수 있습니다.
- 가로(x): 양수면 오른쪽, 음수면 왼쪽으로 그림자가 이동합니다.
- 세로(y): 양수면 아래, 음수면 위로 이동합니다. 보통 글자는 아래쪽 그림자가 자연스럽습니다.
- 번짐(blur): 0이면 또렷한 복사본 같은 그림자, 값을 키우면 부드럽게 퍼지는 빛번짐이 됩니다.
네온·외곽선처럼 그림자를 겹쳐 쓰는 응용은 text-shadow 가이드에 정리했습니다.
- 가독성용 그림자: 사진 위 글자는 검은색에 번짐을 약간 준 그림자를 주면 또렷해집니다. 위치는 0에 가깝게, 번짐만 살짝.
- 외곽선·네온: 같은 코드를 쉼표로 여러 번 겹치면 외곽선이나 네온 효과를 만들 수 있습니다.
- 절제가 미덕: 그림자가 너무 진하거나 멀리 떨어지면 촌스러워 보입니다. 은은하게 쓰는 것이 세련됩니다.
text-shadow: 가로 세로 번짐 색; 순서입니다. 가로(offset-x)는 오른쪽(양수)·왼쪽(음수), 세로(offset-y)는 아래(양수)·위(음수)로 그림자를 옮기고, 번짐(blur)은 그림자가 퍼지는 정도, 색은 그림자 색입니다. 번짐을 0으로 두면 또렷한 그림자, 크게 주면 부드러운 빛번짐이 됩니다.
네. text-shadow는 쉼표로 여러 그림자를 나열할 수 있습니다. 같은 색을 여러 방향으로 겹치면 외곽선(아웃라인) 효과를, 색을 달리해 겹치면 네온·입체 효과를 낼 수 있습니다. 이 생성기는 기본 그림자 하나를 만들어 주며, 출력 코드를 복사해 쉼표로 이어 붙이면 됩니다.
사진 위 글자처럼 배경과 대비가 약할 때, 검은색에 번짐을 약간 준 그림자(예: 0 1px 3px rgba(0,0,0,0.6))를 주면 글자가 또렷해집니다. 위치를 0에 가깝게 두고 번짐만 살짝 주는 것이 자연스럽고, 너무 진하면 오히려 지저분해 보이니 절제하는 것이 좋습니다.
그림자 색을 새카만 검정으로 두고 투명도만 0.2에서 0.4 사이로 낮추면, 배경 색이 비쳐 보여 그림자가 훨씬 자연스러워집니다. 불투명한 진한 그림자는 글자에서 떨어진 또 하나의 검은 덩어리처럼 보이기 쉽습니다. 이 도구는 색과 투명도를 따로 조절해 같은 검은색이라도 은은한 그림자를 만들 수 있게 했습니다.
어두운 배경에서는 검은색 그림자가 거의 묻혀 효과가 약해집니다. 다크 모드에서는 그림자 색을 흰색이나 밝은 색으로 바꿔 글자 주변이 은은하게 빛나는 글로우 효과를 주는 편이 낫습니다. 라이트와 다크에서 서로 다른 그림자 값을 미디어 쿼리로 나눠 적용하는 것을 권합니다.