폰트 그라데이션을 CSS로 적용하는 방법

보통 그러데이션은 벡 그라운드에 주로 사용한다.

그래서 그 사용법은 CSS Gradient 사이트에서 쉽게 바꾸어 코드로 변환할 수 있다.

근데 우연히 Font Gradient를 바꾸어야 할 경우가 생겨서 알아보다가 찾게 되어 글을 쓰게 되었다.

 

 

 

Font Gradient Access

폰트에 그라디언트 적용하는 방법은 다음과 같다.

See the Pen CSS: Font Gradient by miok-jung (@miok-jung) on CodePen.

위 코드는 폰트에 gradient를 적용한 예시이다.

 

.border-box{
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box; 
}
.content-box {
  background-clip: content-box;
}
.font-gradient{
  -webkit-background-clip: text;
  color: transparent;
}

 

 

background-clip

요소의 배경이 테두리(border-box), 안쪽 여백(padding-box), 콘텐츠 상자(content-box), 폰트(text) 중 어디까지 차지할지 지정한다.

 

CSS에서 태그가 있을 때 태그 밖은 margin, 태그 안에서는 border부터 시작하여 padding, content가 있다. 그래서 background-clip에서 테두리부터 폰트까지 그라디언트를 적용하는 방법이 달라진다.

html tag

background-clip 적용에 따른 gradient

color: transparent를 통해 폰트 칼라를 투명하게 준다. 그러면 배경이 당연히 그 색으로 나오게된다. 다만, padding값이 크면 클수록 gradient에서 보여줄 다양한 색상은 달라질 수밖에 없다.

 

그리고 마지막으로 무지개를 모든 색상에넣으려면 다음과 같은 코드로 적어야 한다.

.font-gradient-no{
  padding: 0;
  border: none;
  text-decoration: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

패딩없이 모든 그라디언트가 적용

그런데...

webkit이 크롬 브라우저 적용인데, 일부는 -webkit-text-fill-color을 적용해야 할 경우도 있고 그냥 color로 만으로도 되는데 이 부분은 실제 프로젝트를 통해서 적용을 해봐야 알 수 있을 것 같다.

 

 

 

오늘은 gradient에 대한 좀 더 업그레이드 된 방법에 대해 알아보았다.

이전에도 분명 이런 것이 있었겠지만, 실제 프로젝트에서는 많이 쓰이진 않았기에 잊혔었다.

이번에 다시 정리를 통해 조금 더 정리를 하게 되었다.