🖋️ CSS 생성기

텍스트 외곽선

글자에 외곽선을 넣는 CSS를 바로 만들고 복사하세요.

넣을 글자

실시간 미리보기 — 어떤 배경에서도 확인

여기에 글자를 입력하면 바로 미리보기됩니다

자주 쓰는 설정으로 시작

외곽선 두께 2px

얇게 18 두껍게

외곽선 색#2563EB

글자 채움색#FFFFFF

CSS

이 설정이 마음에 들면 URL을 저장해 두세요.

그라데이션 생성기외곽선과 어울리는 배경 그림자 생성기글자를 더 또렷하게

설명

글자에 테두리를 넣는 CSS(-webkit-text-stroke)를 만들어 드립니다. 두께와 색만 바꾸면 미리보기가 바로 바뀌고, 완성된 코드를 복사해 붙여넣기만 하면 됩니다. 배경에 묻히는 제목이나 썸네일 글자를 또렷하게 살릴 때 좋습니다.

CSS 텍스트 외곽선 도구는 글자 주변에 테두리를 넣는 CSS 코드를 자동으로 생성해 줍니다. 흰 배경에 흰 글자처럼 배경과 글자 색이 비슷할 때, 또는 배너·포스터 디자인에서 글자를 또렷하게 강조하고 싶을 때 특히 유용합니다. 원하는 색상과 두께를 설정하면 바로 복사해 쓸 수 있는 CSS가 생성됩니다.

사용 방법

먼저 넣을 글자를 입력하고, 외곽선 두께를 슬라이더로 조절합니다(보통 1~3px이 자연스럽습니다). 외곽선 색과 글자 채움색을 각각 색상 피커에서 고르면 미리보기 영역에서 결과가 즉시 바뀝니다. 마음에 들면 생성된 -webkit-text-stroke CSS 코드를 복사해 본인 프로젝트의 스타일시트에 붙여넣으면 됩니다.

알아두면 좋은 점

-webkit-text-stroke는 Chrome·Safari·Edge 등 대부분의 최신 브라우저에서 지원되지만, 글자 안쪽으로 선이 파고드는 특성이 있어 두께가 두꺼울수록 글자 내부가 좁아 보입니다. 이를 방지하려면 text-shadow를 여러 방향으로 겹치는 방식을 사용하면 글자 바깥쪽으로만 테두리가 그려져 가독성이 좋아집니다. 외곽선 두께가 2px을 넘을 경우 폰트 크기도 함께 키우는 것이 시각적으로 균형이 잡힙니다. 다크 배경에 밝은 외곽선 조합은 로고 텍스트나 게임 UI에서 자주 쓰이는 패턴입니다.

이럴 때 유용해요

유튜브 썸네일이나 SNS 카드 이미지를 만들 때 글자가 배경에 묻히지 않도록 외곽선을 추가하면 클릭률이 높아집니다. 웹 배너에서 그라데이션 배경 위 텍스트가 잘 읽히지 않을 때, 외곽선 한 줄로 가독성 문제를 빠르게 해결할 수 있습니다. 웹폰트를 사용하는 랜딩 페이지 히어로 영역처럼 큰 텍스트를 사용하는 곳에서도 외곽선을 더하면 배경 이미지가 바뀌어도 항상 읽기 쉬운 텍스트를 유지할 수 있습니다.

자주 묻는 질문

외곽선이 글자 안쪽을 침범해서 글자가 이상하게 보여요.

-webkit-text-stroke는 선이 글자 중심선을 기준으로 안팎으로 퍼지기 때문에 두께가 두꺼우면 내부가 좁아집니다. 생성된 코드에 paint-order: stroke fill; 을 함께 적용하면 외곽선이 글자 뒤로 렌더링되어 글자 내부가 가려지지 않습니다.

인터넷 익스플로러에서도 동작하나요?

-webkit-text-stroke는 IE에서 지원되지 않습니다. IE 지원이 필요하다면 text-shadow를 여러 방향으로 쌓는 방식을 사용해야 합니다.

외곽선 색상을 반투명하게 설정할 수 있나요?

색상 피커에서 rgba 값을 사용하면 투명도가 있는 외곽선을 만들 수 있습니다. 예를 들어 rgba(0,0,0,0.5)는 50% 투명한 검정 외곽선입니다.

생성된 CSS를 어디에 붙여넣어야 하나요?

해당 텍스트 요소의 CSS 선택자 블록 안에 붙여넣으면 됩니다. 예를 들어 h1에 적용하려면 h1 { } 안에 복사한 속성을 추가하면 됩니다.

글자 크기와 외곽선 두께는 어느 비율이 적당한가요?

일반적으로 글자 크기의 2~5% 정도가 자연스럽습니다. 16px 글자라면 1px, 40px 이상의 큰 텍스트라면 2~3px 정도가 가독성과 디자인 균형이 좋습니다.

개인정보처리방침

모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com

텍스트 외곽선 도구 사용법

이 도구는 글자에 테두리를 그리는 CSS -webkit-text-stroke 속성을 시각적으로 만들어 줍니다. 외곽선 두께(px)와 색상을 조절하면 미리보기 글자가 즉시 바뀌고, 완성된 코드를 그대로 복사해 프로젝트에 붙여넣으면 됩니다. 채워지는 글자색(fill)과 외곽선 색을 다르게 지정하면 만화체·네온·아웃라인 타이틀 같은 효과를 만들 수 있습니다.

작동 원리 — 외곽선은 글자 위에 겹쳐진다

-webkit-text-stroke는 -webkit-text-stroke-width(두께)와 -webkit-text-stroke-color(색)를 합친 단축 속성입니다. 핵심은 외곽선이 글자 윤곽선을 기준으로 안쪽·바깥쪽 양방향으로 그려지며, 채움색 위에 덮인다는 점입니다. 그래서 두께를 키우면 외곽선이 글자 속을 파고들어 채움 면적이 줄고, 얇은 획의 폰트는 두꺼운 외곽선을 주면 글자가 뭉개져 보입니다.

이 겹침 순서를 뒤집으려면 paint-order: stroke fill;을 함께 쓰면 됩니다. 외곽선을 먼저 칠하고 채움색을 나중에 얹어, 획이 가늘어지지 않고 글자 원래 모양이 살아납니다.

브라우저 지원과 코드 예시

표준 이름은 text-stroke지만 실제로는 대부분 브라우저가 -webkit- 접두어 버전만 인식합니다. Chrome·Edge·Safari·Firefox 모두 -webkit-text-stroke를 지원하므로 접두어가 붙은 형태를 그대로 쓰는 것이 안전합니다.

.title {
  -webkit-text-stroke: 2px #1B3A6B;
  color: #ffffff;         /* 채움색 */
  paint-order: stroke fill;
}

채움색을 투명(color: transparent)으로 두면 속이 빈 아웃라인 글자만 남습니다.

이럴 때 씁니다

상황	설정 팁
밝은 이미지 위 흰 글자가 안 보일 때	흰 채움 + 어두운 1~2px 외곽선으로 가독성 확보
배너·썸네일 타이틀	두꺼운 외곽선 + `paint-order`로 획 보존
속 빈 아웃라인 로고체	채움 transparent + 외곽선만

실전 팁

외곽선 두께는 폰트 크기에 비례해 정하세요. 작은 본문 글자에 2px 이상을 주면 자간이 붙어 읽기 어렵습니다. 두께 단위로 px 대신 0.03em처럼 em을 쓰면 글자 크기가 바뀌어도 비율이 유지됩니다. 아주 두꺼운 외곽선이 필요하면 -webkit-text-stroke 하나보다 여러 겹의 text-shadow를 조합하는 편이 모서리가 매끄럽습니다.