css text gradient

css로 텍스트에 그라디언트 먹이는 방법.

 

1. background를 원하는 그라디언트, size 100%, repeat으로 설정 (특정 브라우저 gradient 안 먹힐 경우를 위해 background-color도 설정)

.gradient-text {
    background-image: linear-gradient(90deg,#0380be,#47bd9c 50%,#dde21f);
    background-size: 100%;
    background-repeat: repeat;
    background-color: #0380be;
}

 

2. background-clip 을 text로 설정하여 background가 text에 적용되도록, text-fill-color를 transparent로 설정하여 텍스트를 투명으로 변경하여 백그라운드 컬러가 뚫고 나오도록 설정한다. 

 

.gradient-text {
    background-image: linear-gradient(90deg,#0380be,#47bd9c 50%,#dde21f);
    background-size: 100%;
    background-repeat: repeat;
    background-color: #0380be;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

 

3. 적용 완료!

 

4. 2021-11-10 기준 사파리 (아이패드 프로 크롬에서도 동일 현상 확인)에서 한글에는 그라디언트가 잘 적용되었으나, 영어에서 그라디언트 적용이 안 되는 현상 발견. 스택 오버플로우 검색 결과 사파리 오피셜 버그에 등록되어있고, 2년간 고쳐지지 않았다고 한다. 그래서 편법으로 display를 list-item으로 변경되면 적용되는 것을 확인하였다.

 

.gradient-text {
    background-image: linear-gradient(90deg,#0380be,#47bd9c 50%,#dde21f);
    background-size: 100%;
    background-repeat: repeat;
    background-color: #0380be;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    display: list-item;
    color: transparent; //설정해서 list-item의 dot을 투명으로
}

 

참조

https://fossheim.io/writing/posts/css-text-gradient/

Sarah L. Fossheim

https://stackoverflow.com/questions/44963978/safari-on-ios-not-displaying-text-when-using-background-clip-and-text-fill-color