[CSS] 텍스트에 그라데이션 효과 주기

 

작업중인 사이트가 뭔가 밋밋한 것 같아 텍스트 부분을 수정하기로 했다.

고민하다가 텍스트에 그라데이션을 주는 방향으로 결정!

 

---

 

CSS 코드

  background: linear-gradient(
    307deg, #ff5252 0%, #7700ff 100%
  );
  background: -webkit-linear-gradient(
    307deg, #ff5252 0%, #7700ff 100%
  );
  background: -moz-linear-gradient(
    307deg, #ff5252 0%, #7700ff 100%
  );
  background: -o-linear-gradient(
    307deg, #ff5252 0%, #7700ff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  clip-path: inset(1px);

 

각각 속성에 대한 설명은 아래와 같다.

 

background: linear-gradient(각도deg, 색상 0%, 색상 100%)

배경에 그라데이션을 준다.

호환성을 위해 -webkit-, -moz-, -o-를 붙여준다.

 

background-clip : text

배경이 전경 텍스트 내에서 칠해짐(클리핑).

호환성을 위해 -webkit-을 붙여준다. (꼭 붙여줘야 한다!)

 

-webkit-text-fil-color : transparent

기존 텍스트의 색상 : 투명색으로 하여 색상을 없앰

 

-webkit-box-decoration-break : clone

요소의 조각이 여러줄이 될 때 렌더링 되는 방법 - 감싸는 테두리, 패딩 및 여백을 사용하여 독립적으로 렌더링

 

&

 

아래는 크로스 브라우징 확인시 safari 에서만 상단에 선 하나가 보이는 현상 발생

(왜 발생하는지는 잘 모르겠다)

클리핑 영역을 만들어주는 방식으로 해결하였다.

 

clip-pah : inset(1px)

표시되어야 하는 요소의 부분을 설정하는 클리핑 영역을 만들어줌 : 1px

 

 

 

결과물

 

See the Pen Untitled by Happy Hee (@8happyhee) on CodePen.