【CSS】テキストをグラデーションにする方法

テキストをグラデーションにする方法ってある？

あまり使う機会はないかも知れませんが、たま～にあります。

今回はテキストをグラデーションにする方法について解説してきます。

テキストのグラデーションはCSSで3行だけ

まずは左から右へグラデーションする場合です。

<p>About</p>

p {
  color: red; // 非対応のブラウザの為に色を設定
  background: -webkit-linear-gradient(0deg, red, white); // 背景色にグラデーションを指定
  -webkit-background-clip: text; // テキストで切り抜く
  -webkit-text-fill-color: transparent; // 切り抜いた部分は背景を表示
}

コード解説

それではコードの解説をします。

htmlは特に説明不要ですね。

cssですが、IEなど非対応のブラウザを無視できれば1行目無くても大丈夫です。

言葉だけでは分かりにくいと思うので、段階ごとに見てみましょう。

まずは上記CSSを1つもあててない状態がこちらです。

これはフォントの色はデフォルトの状態ですね。

それでは次にbackground: -webkit-linear-gradient(0deg, red, white);を追加します。

これは背景色を設定した状態です。赤から白に変わっていくグラデーションですね。

最後のデモでお見せしますが、0degを180degにすると左から右へ赤から白に変わっていきます。

次は-webkit-text-fill-color: transparent;を追加します。

これは切り抜くテキスト部分をグラデーションにした状態です。

テキストもグラデーションになりましたが、背景もまだグラデーションなので同化してますね。

そして最後にテキストを切り抜く-webkit-background-clip: text;を追加します。

これでテキスト部分を切り抜くことが出来ました。

ここでcolorを設定しないと最初のデフォルトの色になりますが、それを避けたい場合はグラデーションのメインカラーにしておくといいかと思います。

そうすればこのようになります。

デモ

それでは最後に色んなデモを見てみましょう。

See the Pen
テキストをグラデーション by junpei (@junpei-sugiyama)
on CodePen.

上下左右だけでなく、斜めにしたり、3色使ってカラフルにしたりする事も出来ます。

基本的には太字じゃないと分かりにくいですね。

また斜めの場合は1行より2行の方がハッキリしているのが分かるかと思います。

色々試してみると面白いかも知れません。