사용법
- 가로·세로 위치로 그림자가 떨어지는 방향을 정합니다.
- 번짐과 투명도로 또렷한 그림자부터 부드러운 빛번짐까지 조절합니다.
- 그림자 색과 글자 색을 골라 미리보기로 확인합니다.
- "CSS 복사"로 text-shadow 코드를 복사해 붙여 넣습니다.
활용 팁
- 가독성용 그림자: 사진 위 글자는 검은색에 번짐을 약간 준 그림자를 주면 또렷해집니다. 위치는 0에 가깝게, 번짐만 살짝.
- 외곽선·네온: 같은 코드를 쉼표로 여러 번 겹치면 외곽선이나 네온 효과를 만들 수 있습니다.
- 절제가 미덕: 그림자가 너무 진하거나 멀리 떨어지면 촌스러워 보입니다. 은은하게 쓰는 것이 세련됩니다.
자주 묻는 질문
Q. text-shadow의 네 값은 각각 무슨 뜻인가요?
text-shadow: 가로 세로 번짐 색; 순서입니다. 가로(offset-x)는 오른쪽(양수)·왼쪽(음수), 세로(offset-y)는 아래(양수)·위(음수)로 그림자를 옮기고, 번짐(blur)은 그림자가 퍼지는 정도, 색은 그림자 색입니다. 번짐을 0으로 두면 또렷한 그림자, 크게 주면 부드러운 빛번짐이 됩니다.
Q. 그림자를 여러 개 겹칠 수 있나요?
네. text-shadow는 쉼표로 여러 그림자를 나열할 수 있습니다. 같은 색을 여러 방향으로 겹치면 외곽선(아웃라인) 효과를, 색을 달리해 겹치면 네온·입체 효과를 낼 수 있습니다. 이 생성기는 기본 그림자 하나를 만들어 주며, 출력 코드를 복사해 쉼표로 이어 붙이면 됩니다.
Q. 가독성을 위한 그림자는 어떻게 주나요?
사진 위 글자처럼 배경과 대비가 약할 때, 검은색에 번짐을 약간 준 그림자(예: 0 1px 3px rgba(0,0,0,0.6))를 주면 글자가 또렷해집니다. 위치를 0에 가깝게 두고 번짐만 살짝 주는 것이 자연스럽고, 너무 진하면 오히려 지저분해 보이니 절제하는 것이 좋습니다.
함께 보면 좋은 도구