ウェブ制作

サイト制作のちょっとしたティップスまとめ

ウェブ制作

公開日:2024/10/09

当サイトのリンクには広告が含まれています。

【CSS】テキスト(文字)にグラデーションをつける方法と注意点

テキスト(文字)にCSSでグラデーションを適用する方法を紹介。background-clipとcolor: transparentプロパティを組み合わせる手法や、グラデーションが反映されない際の確認ポイントも解説します。

テキスト(文字)にCSSだけでグラデーションを適用するには、background-clipcolor: transparentプロパティを組み合わせて実現します。

CSSだけでテキスト(文字)にグラデーションをつけるデモ

See the Pen CSSでテキスト(文字)にグラデーションをつける方法 by MEMORUKA (@memoruka) on CodePen.

テキストに直接グラデーションを設定する方法は無い(今のところ)

現在のCSSの仕様では、テキストのcolorプロパティに直接グラデーションを適用することはできません

しかしbackground-clipという「要素の背景をテキストの形状にクリップする」プロパティを活用することで、擬似的にグラデーションが適用されたかのような効果を得ることができます。

CSSの構築手順

  1. background: linear-gradientでテキスト要素の背景にグラデーションを設定
  2. color: transparentでテキストを透明化
  3. background-clip: text;で背景をテキストの形状にクリップ
  4. 必要に応じて、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に適用されているためです。要素全体に背景が広がっているので、テキストの幅がその背景より短いと、グラデーションが期待通りに表示されません。

図解

仕組み上、グラデーションは要素の「背景」に敷かれている

テキストの幅を合わせればOK

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で囲う方法もあります。状況に応じて使い分けてください。

上に戻る