[ReactJS] Header 글씨에 그라데이션 효과 넣기

사이드프로젝트에서 디자이너님이 작업해주신 헤더 글씨에 그라데이션 효과가 있었다. 글씨에 그라데이션은 처음이라 구글링 하면서 해보았다..!

나는 NavLink를 사용하여 헤더를 만들었기 때문에 NavLink를 스타일해주는 스타일 컴포넌트 안에 active 스타일을 추가해주었다.

&.active {
    background: linear-gradient(to right, #9734dd, #f9d5a2 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
  }