CSS로 그라데이션 텍스트 쉽게 만들기

그라데이션이 들어간 텍스트를 CSS만으로 만들 수 있다.

See the Pen vqOaPL by lpla (@lpla) on CodePen.

 

background-clip은 배경의 영역을 지정하는 코드로 기본값은 initial 이다.

background-clip: padding-box; 는 패딩 영역까지 배경이 보이도록 하고,

background-clip: border-box; 는 테두리 영역까지 배경이 보도록 하는 것이다.

예외적으로 webkit(사파리, 크롬) 에서만 background-clip: text; 가 사용 가능한데

텍스트 영역에 배경이 보이도록 하는 것이다.

그리고 텍스트 색상을 투명화하면, 배경색상이 텍스트에 입혀지는 원리이다.