CSS에서 애플 스타일의 경사도 텍스트 만들기

https://zenn.dev/catnose99/scraps/a1ec13e8a2d17350fbfe
애플은 제품 소개 페이지에서 점변색을 자주 사용한다.멋있네.

Apple Card
최근에는 애플처럼 파운데이션으로 글을 표현하는 사이트를 자주 볼 수 있다.

vercel.com
이번에는 CSS가 이렇게 멋진 점차적인 텍스트를 실현하는 방법을 쓰겠습니다.

CSS 샘플

HTML은 다음과 같습니다.

<h1><span class="text-gradient">CSS Gradient Text</span></h1>

CSS에서 텍스트에 그래디언트를 적용하려면 background 속성에 그래디언트 배경을 지정한 후 -webkit-background-clip: text 및 -webkit-text-fill-color: transparent;를 입력합니다.
배경에 그라데이션을 바르고 배경을 문자로 잘라내는 인상을 준다.
예를 들면 다음과 같습니다.

.text-gradient {
  display: inline-block;
  background: -webkit-linear-gradient(45deg, #54d0ff, #9f92ff 20%, #ff7689 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* 未対応ブラウザのために一応テキスト色を指定しておく */
  color: blue;
}

배경이 어두워지면 더 눈에 띄어요.

주안점

1. 요소의 폭을 주의한다

샘플 CSS에는 inline-block가 지정되어 있습니다.inline-block를 지정하여 문자 길이에 따라 요소의 크기를 결정할 수 있습니다.
만약 이것display: block이라면 짧은 텍스트라도 매우 넓은 범위로 확장될 것이다.즉, 배경이 가로로 펼쳐졌음에도 짧은 문자로 잘려 전체 그래디언트에서 일부가 잘리는 현상이 나타날 수 있다는 것이다.

2. 굵은 글꼴 사용

글씨체가 가늘면 그라데이션 효과가 좋지 않다.font-family: bold와 같은 굵은 글꼴을 사용합니다.그나저나 위에 실린 코드펜의 샘플은 Inter 800의 무게를 사용했다.
가능하다면 웹 글꼴 등을 사용하여 모든 환경에서 같은 글꼴로 표시할 수 있는 것이 안전하다고 생각합니다.

3. 대응 환경에 대해

위의 CSS는 현대 브라우저(Chrome, FireFox, Edge, Safari)를 지원합니다.FireFox에도 -webkit-linear-gradient 및 -webkit-text-fill-color 값이 적용됩니다.
IE와 같은 지원되지 않는 브라우저에서 그래디언트를 무시하기 때문에 그래디언트 섹션background: linear-gradient이 아니라 그래디언트 섹션background: -webkit-linear-gradient에 있습니다.
↓ 마지막에 조금 더 자기 방식대로 조절한 패턴도 게재된다.