텍스트에 그라데이션 넣기

텍스트에 그라데이션을 넣는 CSS를 작성해보겠습니다
완성하면 아래의 텍스트처럼 표시됩니다

이렇게요!

 

 

 <div class="gradText" 
 	style="font-size: 2rem;
    background: linear-gradient(to bottom, #F56E4C, #FFB479);
    color: transparent;
    -webkit-background-clip: text;">
 	이렇게요!
 </div>

3번 라인에서 그라데이션 컬러를 지정해줍니다. to bottom 대신 to right, to right bottm, to left top 등으로 방향을 정해줄 수 있습니다.

4번 라인에서는 폰트의 색을 transparent로 지정해 투명하게 표시되도록 합니다.

5번 라인에서는 배경색을 표시할 구역을 text로 지정했습니다.