본문 바로가기

카테고리 없음

text에 그라데이션 효과를 추가하기

    background: linear-gradient(to right, 시작할 색상(ex->#E30052), 끝 색상(ex->#6200EE) );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

 

-> 아래 css를 해당 텍스트 태그의 속성에 추가해 주면된다

 

-> 예를 들어 <a>태그에 텍스트에 효과를 줄 경우

ex)

[html] 

<a className='gradient-test'>그라데이션</a>

 

[css]

.gradient-test {

     background: linear-gradient(to right, 시작할 색상(ex->#E30052), 끝 색상(ex->#6200EE) );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}