CSS 텍스트 그림자 생성기

사용 방법

1. 1

   프리셋이나 첫 번째 겹으로 시작하기

   글로우, 네온, 외곽선, 롱섀도, 엠보스, 레트로 3D 중 하나를 고르거나 첫 번째 겹을 직접 편집합니다. X, Y 오프셋은 -100에서 100px, 번짐은 0에서 100px, 그리고 색과 불투명도를 정합니다. X가 양수면 그림자가 오른쪽으로, Y가 양수면 아래쪽으로 갑니다.

2. 2

   겹 추가·순서 변경·삭제

   직접 최대 6겹까지 추가하고, 화살표 버튼으로 겹을 위아래로 옮기거나 필요 없는 겹을 지웁니다. 부드러운 글로우 옆에 단단한 가장자리를 두거나, 깊이감을 위해 오프셋을 한 번 더 주는 데 쓰세요.

3. 3

   미리보기 판단하기

   미리보기는 모든 겹을 적용한 글자를 보여 줍니다. 글자, 크기, 글자 색을 바꾸고 배경을 어둡게, 밝게, 격자로 바꿔 가며 실제 페이지에서 쓸 배경 위에서 읽히는지 확인하세요.

4. 4

   선언 복사하기

   text-shadow:와 세미콜론이 포함된 출력을 복사해 글자 요소의 규칙에 붙여 넣습니다. 링크 공유 버튼은 겹과 글자를 링크 하나에 담아 줍니다.

5. 5

   롱섀도 늘이기

   롱섀도 프리셋을 고르고 길이 슬라이더를 움직이세요. 길이 1px마다 단단한 겹이 하나씩 생성되며 최대 64겹이고, 색 선택기 하나로 전체 색을 바꿉니다.

작동 원리

text-shadow: 2px 3px 4px #1746d1, -1px 1px 0px #f94144;

실제 예시

1겹: x 2, y 3, 번짐 4, #1746d1. 2겹: x -1, y 1, 번짐 0, #f94144

2px 3px 4px #1746d1, -1px 1px 0px #f94144

프리셋: 글로우. 오프셋 0, 번짐 6(100%)·18(80%)·36(50%), 모두 #d4ff3a

text-shadow:
  0px 0px 6px #d4ff3a,
  0px 0px 18px rgba(212, 255, 58, 0.8),
  0px 0px 36px rgba(212, 255, 58, 0.5);

프리셋: 외곽선 (번짐 0, #0a0c05, (-2, 0), (2, 0), (0, -2), (0, 2) 네 겹)

text-shadow:
  -2px 0px 0px #0a0c05,
  2px 0px 0px #0a0c05,
  0px -2px 0px #0a0c05,
  0px 2px 0px #0a0c05;

프리셋: 롱섀도, 길이 4, 색 #5b3df5

1px 1px 0px #5b3df5, 2px 2px 0px #5b3df5, 3px 3px 0px #5b3df5, 4px 4px 0px #5b3df5

x 0, y 2, 번짐 2.55, 색 #000000, 불투명도 63%

0px 2px 2.5px rgba(0, 0, 0, 0.63)

자주 하는 실수

• 큰 글자에 큰 번짐은 느려질 수 있습니다

  큰 제목에 수십 px의 번짐을 주면 브라우저가 넓은 영역을 다시 그려야 해서 애니메이션이 끊길 수 있습니다. 움직이는 글로우는 작게 하거나 opacity로 애니메이션하세요.

• 그림자는 낮은 대비를 해결해 주지 않습니다

  연한 회색 글자 밑에 어두운 그림자를 깔면 모니터에서는 읽혀도 대비 검사는 통과하지 못합니다. 대비 비율은 글자 색과 배경 사이에서 측정됩니다.

• 겹의 순서가 중요합니다

  먼저 적은 그림자가 위에 올라옵니다. 넓은 글로우 뒤에 단단한 외곽선을 적으면 글로우가 외곽선을 덮어서 흐릿해 보입니다.

• 텍스트 장식선에도 그림자가 생깁니다

  밑줄과 취소선에도 같은 그림자가 적용되므로 링크에서는 의도와 다를 수 있습니다.

• 네 방향 그림자는 모서리가 비기도 합니다

  축 방향 그림자 네 개는 외곽선을 근사할 뿐이라 가는 획의 날카로운 모서리에 틈이 보일 수 있습니다. 큰 디스플레이 글자에서 진짜 테두리가 필요하면 -webkit-text-stroke나 SVG를 고려하세요.

자주 묻는 질문