[CSS] text에 gradient 적용하는 방법

 

디자인을 넣어서 CSS를 적용하다 보면 예쁜 그라데이션 컬러를 적용해야할 때가 있다.

 

일반적으로 div와 같은 요소에는 간단히 background의 linear-gradient 속성을 이용해 적용할 수 있다.

.gradient-box {
            width: 300px;
            height: 300px;
            background: rgb(238,174,202);
            background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
        }

 

그라데이션 컬러 코드는 CSS Gradient 사이트에서 편하게 만들어올 수 있다.

 

Text에 Gradient를 적용하려면?

 

태그 안에 텍스트를 작성하고 같은 방식으로 background: linear-gradient를 적용해보자.

 

See the Pen Untitled by 모카 (@akauwwdc-the-encoder) on CodePen.

 

 

 

 

background로 넣었기 때문에 요소의 배경으로 깔리면서 text에는 적용되지 않고 배경으로 그라데이션 컬러가 깔리게 된다.

 

그렇다고 color에서 linear-gradient를 줘봤자 color가 가진 속성이 아니기 때문에 아무 반응도 일어나지 않는다.

 

이럴때 사용하는 속성이 background-clip !!

 

background-clip : text;

 

https://developer.mozilla.org/ko/docs/Web/CSS/background-clip

background-clip - CSS: Cascading Style Sheets | MDN

 

background-clip : text 스타일을 넣으면, 설정한 background 스타일이 텍스트 위에만 적용되게 된다.

 

 

 

See the Pen Untitled by 모카 (@akauwwdc-the-encoder) on CodePen.

 

 

 

 

 

 

linear-gradient 외에도 이미지를 background로 설정하고, background-clip : text를 설정해

 

텍스트를 이미지가 채우도록 디자인을 적용할 수도 있다😊