グラデーションテキストジェネレーター

グラデーションテキストジェネレーターとは#

グラデーションテキストジェネレーターは、文字をグラデーションで塗りつぶした見た目を作り、それを再現するCSSを出力するツールです。見出しの文字を入力してフォントと配色を選ぶと、プレビューがその場で更新されます。出力はbackground-clip: textを使った.gradient-textルールで、スタイルシートにそのまま貼り付けられます。

入力した文字はプレビュー専用です。出力するCSSはgradient-textクラスに対するスタイルなので、同じコードを任意の要素に適用できます。

使い方#

1. プレビューしたい文字を入力します。
2. フォント、ウェイト、サイズ、字間を決めます。
3. 自分で組み立てるか、プリセットから選びます。種類を選び、角度や中心を整え、停止点を並べます。
4. CSSをコピーします。

プレビューの下地（ライト・ダーク）はプレビューの見え方だけを変える設定です。明るいページと暗いページのそれぞれで、グラデーションの見え方を確かめられます。

設定できる項目#

• テキスト：プレビューする文字です。1行で表示され、長い文字は折り返します。
• フォントとウェイト：システムフォントかGoogleフォントから選びます。選べるウェイトはフォントによって変わります。
• サイズと字間：文字サイズと字間はpxで指定します。字間を負の値にすると文字が詰まります。
• プリセット：あらかじめ用意されたグラデーションです。選ぶと今のグラデーションが置き換わります。
• グラデーション：直線・円形・円錐から選び、停止点を追加・移動・削除できます。
• プレビューの下地：ライト・ダークの2択で、ページの明暗に合わせた見え方を確かめるための設定です。出力には含まれません。

活用シーン#

• ブランドカラーから別の色へ変わるヒーロー見出し。
• ランディングページや機能紹介のグラデーションタイトル。
• ロゴや製品テーマの色を文字に取り込んだ見出し。
• サイト全体の見出しで使い回せるgradient-textクラス。

よくある質問#