CSSでテキストにグラデーションをかける方法(便利なジェネレーターも紹介)

CSSでテキストにグラデーションをかける方法を知りたい。

グラデーションを作成するのに便利なジェネレーターを知りたい。

本記事ではこのような悩みを解決。

テキストグラデーションの実装方法と、便利なジェネレーターを紹介します。

実装サンプル

See the Pen
テキストにグラデーションをかける
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

テキストにグラデーションがかかっておりCSSで再現してます。

実装方法は以下の通りです。

グラデーションをかけるCSSプロパティ

h1 {
  background: linear-gradient(180deg, #ACB6E5, #86FDE8);
  -webkit-background-clip: text;
  color: transparent;
}

グラデーションをかけるには以下プロパティを指定します。

background: linear-gradient();
backgroundプロパティにlinear-gradientを使用。引数にグラデーションの角度・色を指定します。

-webkit-background-clip: text;
background-clipプロパティにtextを指定。グラデーションをかける範囲をテキストに設定します。

color: transparent;
テキストカラーを透明にします。

以上の方法でテキストにグラデーションをかける事ができます。

CSS Gradientジェネレーターで任意のグラデーションを生成しよう

https://cssgradient.io/

CSS Gradientジェネレーターを使えば、簡単に任意のグラデーションを作成・CSSコードを生成できます。

以下サイトにアクセスして任意のグラデーションを生成しましょう。
https://cssgradient.io/

CSSでコードを生成できたら、前章で設定したbackgroundプロパティの値にコピペします。

以上で実装完了です。

まとめ

CSS Gradientはテキストだけではなく、背景にグラデーションを指定する時にも使えるwebサービスです。

ぜひ参考にしてみてください。

以上で解説を終わります。

関連記事

HTMLCSS

【コピペ用】ハンバーガーメニューをCSSのみで実装する方法

2022.06.05
924
HTMLCSS

tableのtd・thタグ内テキストが改行されない原因と解決方法

2022.06.06
248
HTMLCSS プログラミング

CSSで背景画像を右からを基準にpx指定する方法

2020.07.13
270
HTMLCSS

【HTML】OGPタグを設定してfacebookやtwitterに記事を発信しよう

更新日:2019.11.28
129