CSS로 글자에 그라디언트 색상 넣는 방법

CSS로 글자에 그라디언트 색상 넣는 방법입니다. 어렵지 않고 간단하게 글자에 그라디언트를 넣을 수 있어, 포인트를 줘야할 때 사용하면 좋습니다.

 

 

글자에 그라디언트를 넣기 위해서는 위의 이미지처럼 배경 색상을 그라디언트로 넣어주면 됩니다.

  background: linear-gradient(to left,#b0d9ff,#3528e6,#ef9dff);

 

 

배경 색상을 그라디언트로 넣어 줬다면, 글자 색을 투명하게 만들어 배경 그라디언트만 보여지도록 만들어 주세요.

  color:transparent;

 

 

글자를 투명하게 만들었으면 background-clip:text; 속성을 사용해서 배경 색을 글자 기준으로 잘라줍니다. 배경을 글자 기준으로 자르면 글자에 그라디언트가 들어가게 됩니다.

background-clip: text;
-webkit-background-clip: text;

 

글자 색을 그라디언트로 넣을 때 주의해야할 점은 backround-clip 속성이 backround 속성보다 우선되어야 합니다. background 속성을 background-clip 속성보다 뒤에 입력하는 경우 배경이 글자 기준으로 잘리지 않고 영역 전체에 그라디언트가 표시됩니다.

 

 

완성된 코드입니다.

<h1 class='grad'>
  글자에 그라디언트 넣기
</h1>

.grad{
  text-align: center;
  color:transparent;
  background: linear-gradient(to left,#b0d9ff,#4c41e7,#ef9dff);
  background-clip: text;
  -webkit-background-clip: text;
}

 

응용해서 글자에 그라디언트를 넣어준 후 애니메이션을 사용해 글자 색이 변하게도 만들어 줄 수 있습니다.

.grad{
  text-align: center;
  color:transparent;
  background: linear-gradient(to left,#b0d9ff,#4c41e7,#ef9dff);
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 200% 200%;
  animation: bg ease 6s infinite;
}

@keyframes bg {
  0%{background-position: 0% 0%;}
  50%{background-position: 100% 100%}
  100%{background-position: 0% 0%;}
}