🔡 CSS text-shadow 생성기 | 방식 골라 복사

미리보기 문구

글자 크기

글자 색

그림자 방식

단일: 가로 오프셋

단일: 세로 오프셋

단일: 번짐

그림자 색 (단일·외곽선 공용)

단일: 그림자 불투명도

다중: 한 줄에 가로 세로 번짐 색 네 값 (예: 2 2 4 #000000)

외곽선: 테두리 두께 (1~10)

text-shadow 는 box-shadow 와 값 개수가 다릅니다

box-shadow 는 가로·세로·번짐·확산·색 다섯 값을 받지만 text-shadow 는 확산이 없어 네 값뿐입니다. 네 번째 자리에 색이 오기 때문에 box-shadow 코드를 그대로 옮기면 색이 확산 값으로 읽혀 선언이 버려집니다. 여기서는 세 가지 방식으로 그림자 목록을 만들어 줍니다.

다중 그림자와 외곽선 흉내기

그림자는 쉼표로 여러 개를 이어 쓸 수 있고, 앞에 적은 것이 위에 겹칩니다. 같은 색 그림자를 여덟 방향으로 깔면 테두리처럼 보이는데, 이 방식은 글자 두께를 그대로 두는 대신 번짐 0 인 그림자 여덟 개가 필요합니다. 값 순서는 W3C 의 CSS Text Decoration 명세를 따릅니다(2026년 10월 기준).

하지 않는 것

요소 박스에 그림자를 넣는 box-shadow 와 그림자 번짐을 글자 안쪽으로 넣는 inset 은 만들지 않습니다. text-shadow 에는 inset 키워드가 없습니다. 외곽선은 10px 까지만 만들며, 더 두꺼운 테두리는 SVG 나 테두리용 글꼴이 깔끔합니다.

자주 묻는 질문

box-shadow 코드를 text-shadow 에 그대로 써도 되나요?

안 됩니다. box-shadow 의 네 번째 값은 확산이지만 text-shadow 의 네 번째 값은 색입니다. 그대로 옮기면 선언이 무효로 버려집니다.

글자 테두리를 어떻게 만드나요?

같은 색 그림자를 번짐 0 으로 여덟 방향에 깔면 테두리처럼 보입니다. 이 도구의 외곽선 방식이 그 여덟 줄을 한 번에 만들어 줍니다.

그림자를 여러 개 적으면 순서가 중요한가요?

중요합니다. 앞에 적은 그림자가 위에 겹치고 뒤에 적은 것이 아래에 깔리므로, 색이 다르면 순서에 따라 모습이 달라집니다.

🔡CSS text-shadow 코드 생성기

관련된 도구

CSS transform 회전·크기 코드 생성기

UI 텍스트 행간(Line Height) 계산기

text-shadow 는 box-shadow 와 값 개수가 다릅니다

다중 그림자와 외곽선 흉내기

하지 않는 것

자주 묻는 질문

관련된 도구

CSS transform 회전·크기 코드 생성기

UI 텍스트 행간(Line Height) 계산기

text-shadow 는 box-shadow 와 값 개수가 다릅니다

다중 그림자와 외곽선 흉내기

하지 않는 것

자주 묻는 질문

같은 카테고리 도구