[HTML/CSS] 글자색 그라데이션 적용하기

 

지난번 포스팅에서

배경 그라데이션, 무지개 그라데이션을 적용하는 방법을 알아보았습니다.

 

[HTML/CSS] 배경색 그라데이션 넣기 (linear-gradient())

[HTML/CSS] 배경색 그라데이션 넣기 (linear-gradient())

[HTML/CSS] 무지개 그라데이션 (linear-gradient)

[HTML/CSS] 무지개 그라데이션 (linear-gradient)

 

배경에 그라데이션 넣기 - linear-gradient()

배경색에 그라데이션을 적용할 때,

linear-gradient() 등의 함수를 사용하였습니다.

글자에 그라데이션을 적용할 때도 같은 방법을 사용할 수 있습니다.

(linear-gradient() 함수의 자세한 사용법은, 지난 포스팅을 참고하세요.)

그러나, 글자에 그라데이션을 적용할 때는, 추가적인 트릭이 필요합니다.

 

 

글자에 그라데이션 넣기

  Step1. 배경색에 그라데이션 넣기 (linear-gradient())  

<span>그라데이션</span>

span {
  font-size: 50px;
  font-weight: bolder;
  
  background-image: linear-gradient(to right, blue, skyblue);
}

background-image: linear-gradient(to right, blue, skyblue);

먼저 글자의 배경에 그라데이션을 적용합니다.

(그라데이션은 'background-image' 속성에 적용해야 하는 것에 주의하세요.

'background-color' 속성이 아닙니다.)

 

 

  Step2. 배경색을 텍스트에까지 적용하기 (background-clip)  

<span>그라데이션</span>

span {
  font-size: 50px;
  font-weight: bolder;
  
  background-image: linear-gradient(to right, blue, skyblue);
  background-clip: text;
  -webkit-background-clip: text;
}

background-clip: text;

background-clip 속성은, 배경을 어디까지 적용할지를 지정하는 속성입니다.

• border-box : border 영역까지 배경을 적용합니다.
• padding-box : padding 영역까지 배경을 적용합니다.
• content-box : content-box 영역까지 배경을 적용합니다.
• text : 텍스트 영역까지 배경을 적용합니다.

우리는 배경으로 설정한 그라데이션을 텍스트에 적용하려고 하므로,

background-clip의 값을 'text'로 지정합니다.

그러나, background-clip 속성의 'text' 값은 아직 모든 브라우저가 서포트하고 있지는 않습니다.

따라서, 크로스 브라우징을 위해, 다음과 같이 -webkit 구문을 추가하였습니다.

-webkit-background-clip: text;

 

(브라우저별 지원 현황은 아래 링크를 참조하세요.)

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#browser_compatibility

 

 

  Step3. 텍스트를 투명하게 하기 (color : transparent)  

<span>그라데이션</span>

span {
  font-size: 50px;
  font-weight: bolder;
  
  background-image: linear-gradient(to right, blue, skyblue);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

color: transparent;

마지막으로, 텍스트를 투명하게 하여

위에서 그라데이션으로 지정한 배경이 화면에 보이도록 합니다.

 

---

 

물론, linear-gradient() 함수 이외의 다른 그라데이션 함수를 사용해도 됩니다!!