テキスト(文字)にCSSだけでグラデーションを適用するには、background-clip
とcolor: transparent
プロパティを組み合わせて実現します。
CSSだけでテキスト(文字)にグラデーションをつけるデモ
See the Pen CSSでテキスト(文字)にグラデーションをつける方法 by MEMORUKA (@memoruka) on CodePen.
テキストに直接グラデーションを設定する方法は無い(今のところ)
現在のCSSの仕様では、テキストのcolor
プロパティに直接グラデーションを適用することはできません。
しかしbackground-clip
という「要素の背景をテキストの形状にクリップする」プロパティを活用することで、擬似的にグラデーションが適用されたかのような効果を得ることができます。
CSSの構築手順
background: linear-gradient
でテキスト要素の背景にグラデーションを設定color: transparent
でテキストを透明化background-clip: text;
で背景をテキストの形状にクリップ- 必要に応じて、
width: fit-content;
やdisplay: inline-block;
などを使いテキスト幅とグラデーションの終点を揃える
まずテキスト要素のbackground
プロパティにlinear-gradient
を指定してグラデーションを作成します。
次に、color: transparent
でテキストの色を透明化します。
最後にbackground-clip: text;
で背景をテキストの形状にクリップすることで、グラデーションが適用されたテキストが完成します。
.gradient{
color: transparent;
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(255,131,89,1) 100%);
background-clip: text;
}
グラデーションが上手く効かない(ずれる)場合
インライン要素であれば問題はありませんが、段落p
や見出しタグh
のようなブロック要素に適用した場合、linear-gradient
で設定したグラデーションと、表示されているテキストのグラデーションが一致しないことがあります。

理由は仕組みを考えれば簡単で、グラデーションは背景のbackgroundに適用されているためです。要素全体に背景が広がっているので、テキストの幅がその背景より短いと、グラデーションが期待通りに表示されません。
図解


fit-contentで解決
対処法は、background
が適用される範囲とテキストの幅を揃えることです。方法は色々考えられますが、自分ならfit-content
を使ってサクッと解決します。
.gradient{
width: fit-content; /* widthをテキスト量に合わせる */
color: transparent;
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(255,131,89,1) 100%);
background-clip: text;
}
See the Pen CSSでテキスト(文字)にグラデーションをつける方法 by MEMORUKA (@memoruka) on CodePen.
ブロック要素として段落は維持しつつ、幅はテキスト量に連動できます。見出しタグにも使いやすいです。
他にはinline-block
に変換したり、グラデーションを適用したい部分をインライン要素span
で囲う方法もあります。状況に応じて使い分けてください。