Text Shadow Generator

CSS text-shadow란?

CSS text-shadow 속성은 텍스트 문자에 직접 하나 이상의 그림자 효과를 추가해요. box-shadow는 요소의 컨테이너를 감싸지만, text-shadow는 각 글자의 곡선과 획을 따라가요. 이는 타이포그래피 효과에 이상적이에요 — 미묘한 깊이감부터 생생한 네온 글로우까지 표현할 수 있어요. 그림자는 선언된 순서대로 겹쳐지며, 첫 번째 그림자가 맨 위에 위치해요. 레이아웃 흐름에 영향을 주지 않으므로 그림자를 추가하거나 제거해도 주변 요소가 이동하지 않아요. 모든 현대 브라우저가 text-shadow를 지원하며 성능이 우수해서, 어떤 프로젝트에서도 안전하고 가벼운 선택이에요.

CSS text-shadow Syntax

text-shadow 단축 속성은 세 개의 길이값과 색상을 받아요: offset-x, offset-y, blur-radius, 그리고 color. Offset-x는 그림자를 수평으로 이동시켜요 (양수는 오른쪽, 음수는 왼쪽). Offset-y는 수직으로 이동시켜요 (양수는 아래). Blur-radius는 그림자 가장자리의 부드러움을 조절해요 — 0 값은 선명한 그림자를 만들고, 높은 값은 확산된 글로우를 만들어요. 색상은 rgba()와 hsla()를 포함한 모든 유효한 CSS 색상을 받아요. Blur-radius는 생략할 수 있으며 기본값은 0이에요. 여러 개의 그림자는 같은 속성에 쉼표로 구분해서 선언해요.

Creative Effects: Neon, Glow, Retro, and Emboss

여러 개의 text-shadow를 겹쳐서 다양한 시각 스타일을 만들 수 있어요. 네온 글로우는 오프셋 없이 같은 색상의 2~3개 그림자를 점점 더 큰 blur 반경과 감소된 불투명도로 만들어요. 레트로 3D 텍스트는 선명한 그림자(blur 0)를 고정된 오프셋에 대비되는 색상으로 겹쳐요. 엠보스 효과는 밝은 그림자를 음수 오프셋에, 어두운 그림자를 양수 오프셋에 결합해서 텍스트가 배경에서 튀어나온 것처럼 보이게 해요. 파이 효과는 빨강, 주황, 노랑 그림자를 음수 y-오프셋으로 겹쳐서 위로 흐르는 불꽃을 시뮬레이션해요. 이런 기본 요소를 이해하면 한 장의 이미지 없이도 거의 모든 타이포그래피 효과를 만들 수 있어요.

Text Shadow Tips and Best Practices

• rgba() 색상을 사용해서 텍스트 색상에 영향 없이 각 그림자의 불투명도를 조절해요
• Blur 0은 선명한 레트로 스타일 그림자를 만들어요 — 빈티지와 게임 UI에 좋아요
• 2~3개 그림자를 점점 더 큰 blur로 겹쳐서 자연스러운 부드러운 글로우를 만들어요
• 애니메이션을 적용하는 텍스트에는 4개 이상의 그림자 레이어를 피해요 — 각 레이어는 페인트 비용을 늘려요
• 어두운 배경과 밝은 배경을 테스트해요: 어두운 배경에서 보이지 않는 그림자가 밝은 배경에서 거칠게 보일 수 있어요
• 오프셋 값을 작게 유지해요 (1~4px) — 가독성을 해치지 않는 미묘한 깊이감을 위해