CSS 그라디언트 텍스트가 사각형으로 나오는 이유
텍스트에 그라디언트를 넣으려고 background: linear-gradient(...)를 지정했는데, 글자 색이 아니라 화면에 사각형 배경만 칠해진 경험이 있을 것입니다. 이건 오타나 브라우저 버그가 아니라 background가 원래 요소의 사각형 박스 전체를 채우는 속성이기 때문입니다. background-clip: text 속성 하나만 더하면 배경이 글자 모양 그대로만 남고 나머지는 투명하게 잘려나갑니다.
요약 ① background(-image)는 원래 요소의 사각형 박스 전체를 채우는 속성입니다 ② background-clip: text는 이 배경을 글자 모양으로 잘라내 그 부분만 보여줍니다 ③ 글자 색을 투명(transparent)으로 바꿔야 잘라낸 배경이 글자 색에 가려지지 않습니다
사각형으로 칠해지는 이유 — 왜 이런 일이 생기나
CSS에서 background는 요소가 차지하는 사각형 영역(박스) 전체를 칠하는 속성입니다. 글자는 이 배경 위에 별도의 레이어로 그려지기 때문에, background에 그라디언트를 넣어도 기본값으로는 박스 전체가 그라디언트로 덮이고 글자는 그 위에 원래 색(보통 검정)으로 그대로 보입니다.
즉 배경과 글자는 원래 서로 다른 레이어입니다. 배경을 글자 모양대로만 남기려면 브라우저에게 '이 배경을 텍스트 모양대로 잘라내라'고 별도로 지시해야 합니다. 이 지시를 담당하는 속성이 background-clip이고, 값으로 text를 주면 배경이 박스 전체가 아니라 글자 윤곽선 안쪽에만 클리핑됩니다.
글자 모양대로만 채우기 — 확인 및 해결 방법
직접 해보려면 순서가 중요합니다. 먼저 텍스트 요소에 background 또는 background-image로 원하는 그라디언트를 지정합니다. 색이 두 개 이상이면 linear-gradient(각도, 색1 위치%, 색2 위치%) 형태로 씁니다.
다음으로 background-clip: text를 추가합니다. 사파리를 포함한 웹킷 계열 브라우저는 아직 접두사 없이는 인식하지 않으므로 -webkit-background-clip: text를 함께 적어야 합니다. 이 한 줄이 배경을 사각형 박스가 아니라 글자 윤곽선 안쪽으로 잘라냅니다.
마지막으로 글자 색을 투명하게 만들어야 합니다. color: transparent와 -webkit-text-fill-color: transparent를 같이 넣으면, 원래 검정이었던 글자 색이 사라지고 그 자리로 아래 잘린 그라디언트가 비쳐 보입니다. 이 속성들이 한 세트로 같이 움직여야 그라디언트 텍스트가 완성됩니다.
저희 도구로 확인하기. 각도나 색상 정지점을 바꿀 때마다 코드를 손으로 다시 계산하는 대신, 슬라이더로 조절한 결과를 미리보기로 바로 보고 완성된 CSS를 복사하면 됩니다.
무료 · 가입 불필요 · 슬라이더로 조절하고 CSS 코드 바로 복사
자주 막히는 지점
| 상황 | 원인 |
|---|---|
| background-clip: text를 넣었는데도 그대로 사각형으로 보임 | -webkit-background-clip: text 접두사가 빠져 사파리 등에서 클리핑이 적용되지 않음 |
| 글자가 통째로 안 보이고 빈칸처럼 보임 | color: transparent만 넣고 background-clip: text를 빠뜨려서 배경은 박스 전체에 그대로, 글자만 투명해짐 |
| 그라디언트 방향이 원하는 대로 안 나옴 | linear-gradient 각도는 위쪽(0deg) 기준 시계방향으로 도는 값이라 감각적으로 헷갈리기 쉬움 |
| 일부 구형 브라우저에서 그라디언트 대신 단색만 보임 | background-clip: text 미지원 브라우저에서는 color 값이 폴백으로 그대로 적용됨 |
표에 정리된 것처럼, 대부분의 문제는 클리핑 속성과 글자 색 처리를 세트로 넣었는지에서 갈립니다. 순서와 접두사만 맞추면 이후에는 색상 값만 바꿔도 됩니다.
정리
background는 원래 요소의 사각형 박스 전체를 채우는 속성이라, 그라디언트를 넣어도 기본값으로는 배경이 박스 전체를 덮고 글자는 그 위에 원래 색으로 남습니다. background-clip: text는 이 배경을 글자 윤곽선 안쪽으로 잘라내고, 글자 색을 투명하게 바꿔야 잘린 배경이 비로소 눈에 보입니다.
각도와 색상 정지점 값을 매번 손으로 바꿔가며 결과를 상상하는 대신, 미리보기로 바로 확인하면서 값을 조절하면 완성된 CSS를 그대로 가져다 쓸 수 있습니다.
무료 · 가입 불필요 · 슬라이더로 조절하고 CSS 코드 바로 복사
자주 묻는 질문
background-clip: text는 모든 브라우저에서 지원하나요?
크롬·엣지·파이어폭스 최신 버전은 접두사 없이도 지원합니다. 다만 사파리는 여전히 -webkit-background-clip: text와 -webkit-text-fill-color: transparent를 함께 적어야 정상적으로 동작하므로, 두 표기를 같이 넣는 편이 안전합니다.
그라디언트 대신 이미지를 글자 모양으로 채울 수도 있나요?
가능합니다. background에 그라디언트 대신 url()로 이미지를 지정해도 background-clip: text가 동일하게 작동해서, 사진이나 패턴이 글자 모양대로만 보이게 만들 수 있습니다.
글자가 아예 안 보이고 투명하게만 나오면 무엇을 확인해야 하나요?
color: transparent만 넣고 background-clip: text를 빠뜨렸는지 확인합니다. 클리핑 속성이 없으면 배경은 박스 전체에 그대로 남아 있는데 글자 색만 투명해져서, 그라디언트 위에 글자 자리만 뚫린 것처럼 보일 수 있습니다.