Written by Kasumi

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】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
1253
HTMLCSS

【簡単】radioボタン(ラジオボタン)のデザインをカスタマイズする方法【CSS】

更新日:2022.11.24
1013
HTMLCSS

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

2022.06.05
2387
HTMLCSS

CSSのwhite-space nowrapを子要素だけ解除する方法

2022.08.28
292