[짧은 CSS팁] 그라디언트 타이포그래피

움직이는 그라이언트가 들어간 타이포그래피, https://letter.co/

CSS에서 텍스트에 색상을 넣는 기능은 color를 통해 가능합니다. 하지만 위와 같이 애니메이션이 들어가거나 색상의 변화가 부드럽게 해주려면 color 값만으로는 어색한 경우가 있습니다.

-webkit-text-fill-color

그라이언트 타이포그래피를 위해선 3가지 값이 필요합니다.

background: 앨리먼트의 배경

-webkit-text-fill-color: 텍스트 색상. color와 같은 기능이지만 상위의 권한이 있습니다.

background-clip: 배경값을 확장해 적용. border-box, padding-box, content-box, text 등을 값으로 받습니다.

결과는 다음과 같이 나타납니다.(코드팬 링크)

이제 애니메이션을 적용해봅니다. 그라이던트 애니메이션을 제작할 때는 크게 다음과 같은 구조로 만듭니다.

1. background-size 키우기

2. infinite loop 애니메이션 적용

3. 너무 빠르지 않은 트렌지션

주로 텍스트 그라이언트 애니메이션에선 **background-size: 200% 100%;**와 같이 변경해서 사용합니다. 좌우 너비를 넓혀주어야 애니메이션이 반복될 때 어색하지 않기 때문입니다. 만약 크기를 딱 떨어지게 만들려하면 background 값에 넣을 그라디언트의 시작 색상과 마지막 색상을 일치시켜야하고, 그 과정에서 어색하지 않게 조정해주는 과정이 필요합니다.

결과를 보면 위와 같이 나타납니다. 텍스트에 효과를 넣어주는 방법은 이렇게 할 수 있는데, 여기서 조금 더 나아가면 background-clip(스팩 문서**)**을 활용해 배경의 이미지를 테두리나 패딩, 텍스트에 넣는 방법에 차이를 주어 신선한 스타일을 적용할 수도 있습니다.

영문 버전: https://www.nomcss.com/css/css-gradient-typograph

[[CSS] Gradient Typograph — NOMCSS

To set text color using CSS, we just write color syntax. However, in order for animation or color change to soften as shown above, the color syntax may be not enough.

https://www.nomcss.com/css/css-gradient-typograph](https://www.nomcss.com/css/css-gradient-typograph)