CSS 텍스트 그림자 생성기

CSS text-shadow 속성은 글자 뒤에 흐리거나 선명한 복사본을 하나 이상 그립니다. 레이어 하나로는 사진 위의 제목을 돋보이게 하고, 여러 겹이면 외곽선, 네온 글로우, 3D 글자, 레트로 오프셋도 만들 수 있습니다. 이미지가 필요 없으므로 글자를 선택할 수 있고 어떤 크기에서도 선명합니다. 이 생성기는 값을 만들어 주고, 추가한 레이어를 검증하며, 결과를 브라우저에서 바로 보여 줍니다.

사용 방법

1. 프리셋을 고르거나 "직접 설정"으로 두고 오프셋, 흐림, 색, 불투명도를 정합니다.
2. "프리셋 크기"로 외곽선을 두껍게, 글로우를 넓게, 3D 글자를 깊게 만듭니다.
3. 효과를 조합하려면 한 줄에 하나씩 추가 레이어를 넣습니다.
4. 미리보기 글자와 색을 내 페이지에 맞춘 뒤 CSS 한 줄을 복사합니다.

계산식

text-shadow: <x> <y> [<blur>] <color> [, more layers]

x가 양수이면 그림자가 오른쪽으로, y가 양수이면 아래로 이동합니다. 흐림은 그림자를 부드럽게 하며 음수일 수 없습니다. box-shadow와 달리 spread와 inset이 없습니다. 외곽선 프리셋은 "프리셋 크기"만큼 떨어진 8방향에 선명한 복사본을 놓고, 3D 입체는 깊이 1px마다 복사본을 하나씩 쌓습니다.

예시

기본값(오른쪽 2 px, 아래 2 px, 흐림 4 px, 불투명도 40%의 검정)은 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);라는 부드러운 드롭 섀도를 만듭니다. 선명한 그림자 프리셋을 3 px, 토마토색으로 하면 3px 3px 0 #ff6347이 되고, 1 px 외곽선은 -1px -1px 0 #000000, 1px 1px 0 #000000처럼 8개 레이어가 필요합니다.