CSS text-shadow를 실시간으로 만들고 코드를 복사합니다. 네온·외곽선 등 다중 그림자 프리셋도 지원.

CSS 코드

CSS 텍스트 그림자 사용법

  1. 텍스트와 폰트 크기를 입력합니다.
  2. X·Y 오프셋, 흐림, 색상, 투명도를 슬라이더로 조정합니다.
  3. 네온·외곽선·3D 등 프리셋으로 빠르게 시작할 수 있습니다.
  4. 복사 버튼으로 CSS 코드를 가져갑니다.

주요 기능

  • X / Y / Blur / Color / Opacity 모든 속성 조절
  • 5가지 프리셋 (단순·네온·외곽선·3D·발광)
  • 실시간 미리보기
  • 다중 그림자 자동 합성 (네온·외곽선·3D)

활용 예시

  • 제목·헤더 텍스트의 입체감
  • 네온 사인 효과 (게임·이벤트 페이지)
  • 외곽선으로 배경 위 가독성 향상
  • 3D 효과로 시선 집중
  • 발광 효과로 강조 메시지

다중 그림자 원리

text-shadow는 콤마로 여러 그림자를 겹칠 수 있습니다. 외곽선 효과는 4방향(상·하·좌·우)으로 작은 그림자를, 네온은 흐림이 다른 같은 색 그림자 여러 개를 겹쳐 만듭니다.

자주 묻는 질문

그림자가 너무 무거워 보일 때는?

투명도를 30~50%로 낮추고 흐림을 늘려 부드럽게 만드세요. 검정보다 텍스트와 어울리는 색(예: 진한 자주)을 쓰면 더 자연스럽습니다.

외곽선은 -webkit-text-stroke가 더 낫지 않나요?

-webkit-text-stroke가 더 깔끔하지만 IE·Firefox 지원이 제한적입니다. text-shadow는 모든 브라우저에서 동일하게 동작합니다.

그림자 성능에 영향이 있나요?

다중 그림자(5개 이상)를 큰 텍스트에 적용하면 모바일에서 약간 느려질 수 있습니다. 프로덕션에서는 2~3개 이내가 안전합니다.

한글에도 똑같이 적용되나요?

네, 한글 폰트도 동일하게 동작합니다. 단, 자획이 가는 폰트(나눔고딕 등)는 외곽선이 글자를 두껍게 만들어 가독성이 떨어질 수 있으니 굵은 폰트를 권장합니다.