CSSでAppleっぽいグラーデーションのテキストを作る

https://zenn.dev/catnose99/scraps/a1ec13e8a2d17350fbfe

Appleは製品紹介ページなどによくグラデーションを使っています。カッコいいんですよね。

Apple Card

最近ではAppleっぽくグラーデーションでテキストを表現するWebサイトをよく見かけます。

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などで太いフォントにしましょう。ちなみに上に載せたCodePenのサンプルではInterの800のウェイトを使っています。

できれば、Webフォントを使う等して、全環境で同じフォントで表示されるようにしておくのが安全だと思います。

3. 対応環境について

上記のCSSは、モダンブラウザ（Chrome、FireFox、Edge、Safari）に対応しています。FireFoxに対しても-webkit-linear-gradientと-webkit-text-fill-colorの値が適用されます。

グラデーション部分でbackground: linear-gradientではなく、background: -webkit-linear-gradientとしている理由は、IEなどの未対応のブラウザでグラデーションを無視する（グラデーションだけが適用されないようにする）ためです。

↓ 最後にもう少し自分なりに調整してみたパターンも載せておきます。