CSS를 사용해 텍스트 요소에 선형 그라디언트 색상을 추가하는 방법과, 그라디언트 작업 시 자주 발생하는 실수를 피하는 노하우를 알아봅니다.
HTML 텍스트 요소에 그라디언트 색상을 적용하려면 다음과 같은 CSS 속성들이 필요합니다:
background-webkit-background-clip-webkit-text-fill-color
텍스트에 색상을 입히는데 왜 하필 background 속성을 사용할까요? 다소 우회적인 방법처럼 보이지만, 실제로 잘 작동합니다!
간단한 예제를 만들어 보겠습니다. 주황색과 빨간색 두 가지 색상을 사용해 텍스트 요소에 왼쪽에서 오른쪽으로 이어지는 선형 그라디언트를 적용해 보겠습니다.
HTML
text-gradient라는 클래스를 가진 <h2> 제목 요소입니다:
<h2 class="text-gradient">Gradient text color!</h2>CSS
.text-gradient 클래스에 그라디언트 스타일을 추가합니다:
.text-gradient {
/* 배경색 설정 */
background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
/* 색상을 텍스트 영역에만 마스크하고 나머지는 제거 */
-webkit-background-clip: text;
/* 텍스트 채우기 색상을 투명하게 만들어 마스크된 배경색이 비치도록 처리 */
-webkit-text-fill-color: transparent;
}결과는 다음과 같습니다:
Gradient text color!
멋지죠?
잠깐, 문제가 있습니다!
두 색상이 텍스트 요소에 적용되는 방식에서 무언가 어색하지 않으신가요? 색상이 고르게 분포되지 않았습니다.
linear-gradient CSS 함수는 두 개의 색상 값을 받습니다:
#ff8a00(주황색)#DD4C4F(빨간색)
그리고 CSS에 명시된 대로 0%부터 100%까지 균등하게 분포되어야 합니다:
(to right, #ff8a00 0%, #DD4C4F 100%)즉, 원래 의도한 결과는 텍스트에 이렇게 적용되는 것입니다:
하지만 실제 텍스트 예제는 거의 전체가 주황색으로 표시됩니다:
Gradient text color!
팁: 웹사이트 색상 테마를 다크 모드로 전환하면(달 아이콘 클릭) 차이를 더욱 선명하게 확인할 수 있습니다.
이런 현상이 발생하는 이유는 <h2> 제목 요소가 기본적으로 블록 레벨(block-level) 요소이기 때문입니다. 블록 레벨 요소의 배경은 부모 컨테이너의 전체 너비에 걸쳐 펼쳐집니다.
따라서 <h2> 요소에 추가한 그라디언트 클래스(.text-gradient)의 색상이 background 속성을 기준으로 동작하기 때문에, 실제 텍스트 너비를 훌쩍 넘어서까지 늘어나게 되는 것입니다.
이해를 돕기 위해 텍스트 예제에 테두리를 추가해 보겠습니다:
Gradient text color!
보이시나요?
텍스트 그라디언트는 배경이 아니라 오직 텍스트에만 적용되어야 합니다(다만 이를 구현하려면 어쩔 수 없이 background 속성을 활용해야 합니다).
이 문제를 해결하려면 <h2> 요소의 기본값인 display:block을 inline-block으로 재정의하면 됩니다:
.text-gradient {
background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}결과:
Gradient text color!
완벽하죠! 차이점이 보이시나요? 이제 빨간색 부분도 주황색만큼 또렷하게 드러납니다. 두 색상이 정확히 50:50으로 균등하게 적용되었기 때문입니다.
브라우저 호환성
이 그라디언트 색상 기법은 WebKit 기반 브라우저에서만 지원됩니다. 다른 브라우저를 위해서는 일반 CSS color 속성을 폴백(fallback)으로 지정하고, 그라디언트와 비슷한 단일 색상을 적용해 두는 것이 좋습니다.