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

flexboxで比率を維持したままレスポンシブに拡大縮小可能な横並びレイアウトを作ってみよう

更新日:2019.11.28
4416
HTMLCSS プログラミング

横スライドメニューをhtml・CSSのみで実装【JS不要簡単】

2020.04.12
2286
HTMLCSS

【CSS】data属性の値を擬似要素のcontentプロパティで取得する方法

2023.04.22
1686
HTMLCSS

【CSS】テキストを中央配置にして左寄せにする方法

2022.10.04
692