コーディング Web制作 CSS

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

【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行の方がハッキリしているのが分かるかと思います。

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

 


コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-コーディング, Web制作, CSS