CSS グラデーションテキスト ジェネレーター

グラデーションテキストは、要素の背景にグラデーションを塗り、background-clip: text でその背景を文字の形に切り抜き、文字色を透明にしてグラデーションが透けて見えるようにすることで作ります。このジェネレーターは、一部のブラウザでまだ必要な -webkit- 接頭辞付きのルールを出力し、非対応のブラウザが単色にフォールバックするよう @supports で囲み、結果をお使いのブラウザで表示します。

使い方

1. テキストを入力し、グラデーションの色を2〜8色選びます（1行に1色、位置は任意）。
2. 角度、フォントサイズ、太さ、フォントを設定します。
3. 「文字の幅に合わせる」をオンにしておくと、短い見出しでもグラデーション全体が見えます。
4. CSSとHTMLをコピーし、代替色のコントラスト比を確認します。

計算式

background-image: linear-gradient(<角度>, <色>); background-clip: text; -webkit-text-fill-color: transparent;

グラデーションは要素のボックスの大きさに合わせられるため、幅いっぱいの見出しでは文字の後ろにグラデーションの一部しか来ません。display: inline-blockはボックスを文字の大きさに縮めます。別の色を選ばない限り、代替色はグラデーションの最初の色です。

計算例

初期設定では、コーラルからピーチへ変わる見出しになります。linear-gradient(90deg, #ff7e5f, #feb47b) を64 px、太さ800の文字に切り抜き、@supports の外の代替色として color: #ff7e5f を使います。この代替色は白の上でわずか 2.49:1 で、大きな文字にWCAGが求める3:1にも届かないため、見出しが意味を持つ場合はもっと暗い色を選んでください。