-webkit-text-stroke는 실제 브라우저에서 잘 동작하나요?

접두사가 붙어 있지만 그렇습니다 — Chrome, Edge, Safari, Firefox, Opera 모두 지원합니다(Firefox는 2016년 49 버전에서부터 지원). 표준은 따라가지 못했는데 엔진들은 모두 prefixed 버전을 구현한 CSS 특이 사례입니다. CSS에 -webkit-text-stroke와 text-stroke를 함께 적어 두면 충분합니다. 오래된 브라우저에서 정말 빠지는 건 background-clip: text와 결합한 그라디언트 채움 정도인데, 이것도 현대 브라우저에서는 폭넓게 지원됩니다.

작은 글자에서 외곽선 글자가 흐리게 보이는 이유는 무엇인가요?

-webkit-text-stroke는 글자 외곽 안쪽에 선을 그립니다. 작은 글자에서는 선이 글자 모양의 절반을 잡아먹을 수 있죠. 12px 텍스트에 1px 선을 두르면 글자 내부 공간을 많이 차지합니다. 해결책 두 가지: 글자 크기가 24px 미만이면 선 두께를 1.5px 이하로 유지하거나, 대신 text-shadow를 여러 방향으로 깔아 흉내내세요(text-shadow: -1px 0 black, 1px 0 black, 0 -1px black, 0 1px black). 이 방식은 외곽선이 글자 바깥에 그려져 작은 크기에서도 또렷합니다.

외곽선과 그라디언트 채움을 동시에 쓸 수 있나요?

네 — 요즘 유행하는 '그라디언트 외곽선' 효과의 레시피가 그것입니다. color: transparent로 두고 background: linear-gradient(...), background-clip: text, -webkit-background-clip: text를 함께 적용하세요. 그라디언트가 글자 내부를 채우고 선이 외곽을 그립니다. 함정은 일부 브라우저(특히 Safari)가 stroke와 background-clip의 합성을 깔끔하게 못하는 경우가 있다는 점입니다. 안정적인 우회로는 stroke 대신 text-shadow로 외곽선을 표현하는 것입니다.

외곽선을 그릴 때 text-stroke와 text-shadow 중 어느 게 좋나요?

text-stroke는 글자 경로의 안쪽에서 바깥으로 선을 긋습니다 — 폰트 모양에 기하학적으로 충실하고 큰 크기에서 매우 또렷합니다. text-shadow는 텍스트 그림자를 여러 방향으로 쌓아 외곽선을 흉내 냅니다 — 글자 바깥에 그려지고, 브라우저 계산 비용이 더 적으며, 작은 크기에서 자연스럽게 떨어집니다. 헤드라인급(48px 이상)이라면 text-stroke. 본문급(24px 미만)이라면 text-shadow. 중간 크기는 두 방법 다 테스트해 보세요 — 차이는 미묘하지만 분명히 있습니다.

text-stroke가 줄 높이나 자간에 영향을 주나요?

아니요 — 선은 기존 글리프 메트릭 안쪽에 렌더링되므로 라인박스, 베이스라인, 자간이 바뀌지 않습니다. SVG 오버레이를 덧붙이는 다른 방식 대비 실용적인 장점입니다. 기존 요소에 text-stroke를 추가해도 레이아웃이 깨지지 않습니다. 시각적인 부수효과는 선이 두꺼울수록 글자가 약간 더 굵어 보이는 것뿐이라, 이를 보정하려면 font-weight를 100단계 정도 낮추는 것도 좋은 선택입니다.

CSS 텍스트 스트로크 생성기

-webkit-text-stroke로 외곽선만 있는 글자 효과를 만드세요. 투명·단색·그라디언트 채움과 선택형 그림자를 실시간으로 미리보고, 클릭 한 번으로 CSS를 복사합니다.

텍스트

글꼴

굵기: 900

크기: 96px

선 두께: 2px

선 색상

채움 방식

드롭 섀도 추가

미리보기

STROKE

CSS

.stroked-text {
  font-family: Impact, 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 96px;
  -webkit-text-stroke: 2px #0f172a;
  text-stroke: 2px #0f172a;
  color: transparent;
}

-webkit-text-stroke는 접두사가 붙어 있지만 모든 최신 브라우저에서 동작합니다. color: transparent(또는 background-clip: text로 그라디언트 채움)를 함께 쓰면 속이 빈 글자 효과를 만들 수 있습니다. 24px 미만 작은 글자에는 선이 가독성을 해치므로 선 두께를 2px 이하로 유지하세요.

사용 방법

1외곽선을 두를 텍스트를 입력하세요. 짧은 헤드라인(3~10자)에서 가장 잘 읽힙니다. 긴 문장은 시각적으로 어수선해집니다.
2글꼴과 굵기를 고르세요. Bold(700~900)나 Impact·Arial Black 같은 디스플레이 폰트가 가장 깔끔한 선을 만듭니다 — 얇은 글꼴은 선이 들어갈 공간이 부족합니다.
3선 두께를 정하세요. 헤드라인 크기(60~120px)에서는 1~3px이 적당합니다. 그보다 두꺼우면 선끼리 겹치며 열린 실루엣이 사라집니다.
4채움 방식을 고르세요. '투명'은 고전적인 중공 글자, '단색'은 투톤(예: 검정 외곽선에 노란 글자), '그라디언트'는 글자 안쪽으로 색을 흘려 히어로 텍스트에 잘 어울립니다.
5복잡한 배경에서 텍스트를 띄우고 싶다면 드롭 섀도를 켜세요. 그 다음 '복사'를 누르면 CSS가 스타일시트에 바로 들어갑니다.

주요 기능

어떤 글꼴 크기·굵기·종류에서도 작동하는 실시간 미리보기 — 헤드라인이 실제로 어떻게 보일지 출고 전에 확인
세 가지 채움 모드(투명, 단색, 그라디언트)와 선택형 드롭 섀도 — 모든 흔한 외곽선 텍스트 레시피 커버
-webkit-text-stroke와 text-stroke를 함께 출력해 크로스 브라우저 지원
어떤 웹폰트와도 호환 — 디자인 시스템에 CSS 변수로 끼워 넣으면 효과가 상속됨
완전 클라이언트 사이드 — 서버 처리도, 가입도, 추적도 없음

자주 묻는 질문

더 알아보기

2026년 CSS 텍스트 스트로크 — 진짜로 멋있어 보이는 외곽선 글자 만들기