CSSでテキストにグラデーションを設定する方法とジェネレーターの紹介

テキストの色をCSSでグラデーションにする場合、少しコツがいりますが、簡単に設定ができます。
今回はテキストにグラデーションをかける方法をご紹介いたします！

CSSでグラデーションを設定

CSSでグラデーションを設定するには、まず「linear-gradient」でグラデーションのカラーを設定します。
次に「-webkit-background-clip」で背景を文字の形に設定し、「-webkit-text-fill-color」で文字色を透明に設定します。

.gradient{
  background: linear-gradient(90deg, #0ea8f3, #0a3da9); //グラデーションを設定
  -webkit-background-clip: text; //背景を文字形に設定
  -webkit-text-fill-color: transparent; //文字色を透明に設定
}

ここまでできましたら、グラデーションを付けたいタグへ上記のCSSをつけます。

グラデーションが簡単に設定できるジェネレーター2選

上記のようにCSSを直接記述しなくても、以下のジェネレーターを使用すると、簡単にグラデーションの設定ができます。

CSS グラデーション ジェネレーター

URL：https://front-end-tools.com/generateGradient/

こちらのサイトでは、一覧からグラデーションが選択できる他、通常のグラデーションの他に丸型や放射線、斜めのストライプなど、様々な設定もコピペで簡単に設定ができます。
もちろん、自分で調整する事も可能です。

グラデーションCSSジェネレーター

URL：https://webspe.net/tools/gradation/

こちらのサイトも、通常のグラデーションに加え、円形や扇状が選べ、テンプレートからサンプルのグラデーションをコピペで使用が可能です。
自分で調整する事も可能の他に、クラス名をその場で設定する事も可能です。

まとめ

CSSで文字にグラデーションを設定する方法をご紹介いたしました。

通常の色を付ける設定より、プロパティーが多いですが、設定自体は簡単です。

また、自力でコードを書くのが面倒な場合は、ジェネレーターを使う手もありますので、お好きな方法で設定しましょう！