CSSだけで文字にグラデーションカラーを付ける方法

CSSだけでテキスト文字にグラデーションカラーを付ける方法をご紹介します。

コピペで使えるコードもありますので、ぜひ参考にしてください。

グラデーション文字のサンプル

ここに実際のサンプルを用意しました。

１、普通にグラデーションを付けた文字
２、ライン状のグラデーションを付けた文字
３、グラデーションカラーをアニメーションで色変化させている文字

テキストグラデーションのCSSの書き方

テキストグラデーションの原理

まず原理として次のポイントを理解するといいでしょう。

この３ステップで完成です。

実際のコード

実際には次のようなコードで実現できます。
コピペして色を変えるだけでも使えます。

Gradation Color

<h2 class="gr1"><span>Gradation Color</span></h2>

h2.gr1 span{
  background: -webkit-linear-gradient(left, #ff26fb, #00b3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2の中にわざわざspanを付けているのは、インライン要素に使った方が都合がいいからです。

背景のグラデーションはその要素の領域全体にかかるため、ブロック要素にかけてしまうとテキストの範囲よりもグラデーションの領域が大きく、文字でクリップしてもグラデーション全体が見えない場合があります。

テキストがそのブロック要素全域にある場合は問題ないので、状況によって使い分けてください。

応用でアニメーションを付けてみる

さらに応用編として、グラデーションを動かして色変化をさせてみましょう。

先ほどのコードに次の要素を加えます。

つまり背景を大きくしつつ、それを動かすことで色が変化して見えるということです。

色変化を解りやすくするためにグラデーションには４色使ってみます。

Animation Gradation Color

<h2 class="gr_anime"><span>Animation Gradation Color</span></h2>

h2.gr_anime span{
  background: -webkit-linear-gradient( 60deg,#12d6df, #f70fff,#faea3d, #fd644f);
  background-size:400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textAnime 15s infinite;
}
@keyframes textAnime{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

これで色変化するようになりましたね。

この技法はCSSだけで実現できるので非常に手軽で、視覚的な効果も大きいです。
ぜひ使てみてください。