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

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

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

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

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

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

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

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

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

  • 1.backgound:liner-gradient;でテキストの背景にグラデーションを付ける。
  • 2.background-clip:text;で文字をマスクとし背景を抜く。
  • 3.text-fill-color:transparent;で元々の文字色を透明にする。

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

実際のコード

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

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を付けているのは、インライン要素に使った方が都合がいいからです。

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

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

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

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

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

  • 1.background-size:〇〇%;で背景色を拡大する。
  • 2.@keiframesで背景の位置を動かすアニメーションを付ける。

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

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

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だけで実現できるので非常に手軽で、視覚的な効果も大きいです。
ぜひ使てみてください。

この記事をシェアする

  • Twitterにシェア
  • facebookにシェア
  • LINEにシェア
  • POCKETにシェア
Posted in CSS