CSS 도구/텍스트 그림자 생성기
텍스트 그림자 생성기
다중 레이어와 실시간 미리보기로 멋진 텍스트 그림자를 만들어보세요
미리보기
Sample Text
48px
#1E293B
#F8FAFC
그림자 레이어
레이어 1
#00000040
2px
2px
4px
프리셋
CSS 코드
Loading...CSS 텍스트 그림자 가이드
텍스트에 깊이와 효과를 추가하는 방법을 알아보세요
텍스트 그림자란?
CSS text-shadow 속성은 텍스트에 그림자 효과를 추가합니다. box-shadow처럼 여러 그림자를 쉼표로 구분하여 적용할 수 있습니다. 텍스트 그림자는 X, Y 오프셋, 블러 반경, 색상으로 정의됩니다. 깊이감, 글로우 효과, 스타일리시한 타이포그래피 제작에 완벽합니다.
사용 방법
- 레이어 추가 버튼으로 그림자 레이어 추가
- X/Y 오프셋을 조정하여 텍스트 뒤에 그림자 위치 지정
- 블러를 사용하여 그림자 부드럽게 하거나 글로우 효과 생성
- 복잡한 효과를 위해 여러 레이어 쌓기 후 CSS 복사
전문가 팁
- 밝은 색상과 큰 블러로 네온 글로우 효과 생성
- 증가하는 오프셋으로 여러 그림자를 쌓아 3D 깊이감 연출
- 은은한 그림자(1-2px 오프셋, 낮은 불투명도)는 가독성 향상
브라우저 지원
text-shadow는 Chrome, Firefox, Safari, Edge를 포함한 모든 최신 브라우저에서 지원됩니다. IE10부터 널리 지원되어 프로덕션 사용에 안전합니다.
자주 묻는 질문
텍스트 그림자와 박스 그림자의 차이점은 무엇인가요?
text-shadow는 텍스트 글자의 형태를 따라 그림자를 적용하고, box-shadow는 요소의 사각형 박스에 그림자를 적용합니다. 텍스트 그림자는 inset 옵션이 없고 spread 값도 지원하지 않습니다. 글자별로 그림자가 적용되어 타이포그래피 효과에 최적화되어 있습니다.
네온 글로우 효과는 어떻게 만드나요?
네온 효과는 밝은 색상과 큰 blur 값을 사용하여 만듭니다. 같은 색상으로 blur 값을 점점 늘려가며 여러 그림자를 겹치면 더 강렬한 글로우 효과를 얻을 수 있습니다. 예: 'text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0ff, 0 0 40px #0ff;'
3D 텍스트 효과를 만들 수 있나요?
네, 여러 그림자를 점진적으로 오프셋을 증가시키며 쌓으면 3D 깊이감 효과를 만들 수 있습니다. 각 레이어마다 약간 더 어두운 색상을 사용하면 더 사실적인 입체 효과가 됩니다. 보통 5-10개의 레이어를 1px씩 오프셋하여 사용합니다.
텍스트 그림자가 가독성에 영향을 주나요?
적절히 사용하면 오히려 가독성을 높일 수 있습니다. 밝은 배경에서 어두운 텍스트 뒤에 은은한 밝은 그림자를 추가하면 대비가 향상됩니다. 반대로 너무 강한 그림자나 텍스트와 유사한 색상의 그림자는 가독성을 저하시킬 수 있으니 주의하세요.
텍스트 그림자에서 blur 없이 선명한 그림자를 만들 수 있나요?
네, blur 값을 0으로 설정하면 완전히 선명한 그림자가 만들어집니다. 이 기법은 복고풍 스타일, 스텐실 효과, 또는 글자 테두리 효과에 유용합니다. 선명한 그림자를 여러 방향으로 적용하면 텍스트에 아웃라인 효과를 줄 수 있습니다.