CSS 텍스트 섀도우 생성기

텍스트 섀도우는 타이포그래피를 배경에서 시각적으로 분리하는 강력한 도구입니다. 적절히 사용하면 가독성을 높일 수 있습니다.

text-shadow 구문

text-shadow: 수평 수직 흐림 색상;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

/* 여러 레이어 */
text-shadow: 1px 1px 2px black, 0 0 25px blue;

인기 있는 텍스트 효과

• 기본 그림자: text-shadow: 2px 2px 4px rgba(0,0,0,0.3)
• 네온 효과: 여러 레이어의 색상 그림자
• 엠보싱: 밝은 그림자와 어두운 그림자 조합
• 글로우: 큰 흐림 반경, 같은 색상
• 3D 효과: 여러 단계의 그림자로 깊이감 표현

사용 시 주의사항

• 너무 진한 그림자는 가독성 저해
• 본문 텍스트에는 은은하게 사용
• 제목, 배너, 히어로 섹션에 적합
• 접근성: 색상 대비는 그림자 없이도 충분해야 함