CSS 외곽선 텍스트 (Text Stroke)

사용법

1. 텍스트 입력 (영문 권장)
2. 스타일 선택 (속빈/속채움/이중/3D)
3. 외곽선 두께 + 색상
4. 폰트 선택 (Impact 권장)
5. CSS 복사 또는 PNG 다운로드

주요 기능

• 4가지 스타일 (hollow·filled·double·3D offset)
• 외곽선 두께 1~20px
• 외곽선·채움 색 독립 조정
• 5가지 프리셋
• -webkit-text-stroke 사용

활용 예시

• 유튜브 썸네일 — 외곽선 텍스트로 강조
• 로고 — 빈티지·스트리트 로고
• 만화·웹툰 — 효과음 표현
• 광고 배너 — 굵은 외곽선 헤드라인
• 티셔츠 디자인 — 단순 강렬

text-stroke vs text-shadow

외곽선 텍스트는 두 가지 CSS 기법 가능. (1) -webkit-text-stroke — 진짜 외곽선 (브라우저 99% 지원). (2) text-shadow 누적 — 8방향 shadow를 0px 거리로 누적해 가짜 외곽선. 두꺼울수록 stroke가 깔끔, 1~2px은 shadow가 더 자연스러움. 이 도구는 stroke를 기본 사용.

자주 묻는 질문