CSSで文字にグラデーションをかけるには？
CSS で文字をグラデーションにするには、要素の背景にグラデーションを敷き、background-clip: text で背景を文字の形に切り抜いて、文字色を color: transparent にします。背景が文字の中からだけ見えるので、文字そのものがグラデーションに見えるしくみです。
このツールでは、線形とメッシュの2種類のグラデーションを、色の点をドラッグしながら作れます。フォントは24種類から選べ、ぼかし・色相などの効果やアニメーションも付けられます。できた CSS は Copy ボタンでコピーでき、文字の画像を PNG・WebP・SVG で書き出すこともできます。処理はブラウザの中だけで行い、入力した文字がサーバーに送られることはありません。
生成したコードの使い方
- 見た目を決める。プリセット（12種）から近いものを選び、色の点・角度・フォント・効果を調整します。
- CSS をコピーする。「CSS Code」の Copy ボタンを押し、自分のページの CSS に貼り付けます。スタイルは
.text-gradientというクラスで出力されます。 - 文字にクラスを付ける。グラデーションにしたい見出しなどに
class="text-gradient"を付けます。Google Fonts のフォントを選んだときは、読み込み用の@importも CSS の先頭に入っています。
出力される CSS には、古いブラウザ向けに -webkit-background-clip: text も一緒に書かれています。消さずにそのまま使ってください。
ブラウザ対応
| ブラウザ | background-clip: text |
@property（アニメーション） |
|---|---|---|
| Chrome・Edge | 120 以降 それより前は -webkit- 付きで対応 | 85 以降 |
| Safari（Mac・iPhone） | 14 以降 それより前は -webkit- 付きで対応 | 16.4 以降 |
| Firefox | 49 以降 | 128 以降 |
出典: MDN の互換性データ（browser-compat-data 8.1.2、2026年9月時点）。アニメーションは @property で色の位置や角度を動かしているため、@property に対応していないブラウザではなめらかに動きません。
よくある質問 (FAQ)
背景画像の指定が効いていないと、透明な文字だけが残って消えたように見えます。このしくみは
color: transparent で文字を透明にし、背景のグラデーションを文字の形に切り抜いて見せています。
ほかの CSS で background が上書きされていないか、background-image の行を含めて全部貼り付けたかを確認してください。
古い Chrome・Edge・Safari にも対応させるなら必要です。接頭辞なしの
background-clip: text が使えるのは Chrome・Edge 120 以降、Safari 14 以降で、それより前は -webkit-background-clip: text だけが効きます。
このツールは両方を出力します。
線形は一方向に色が移り変わり、メッシュは複数の色がにじみ合います。線形は
linear-gradient を使い、角度で向きを決めます。
メッシュは色の点ごとに radial-gradient を重ねたもので、点を自由な位置に置けるため、オーロラのような色の混ざり方になります。
画像として書き出して使えます。「画像として書き出し」で形式（PNG・WebP・SVG）とサイズ（1〜4倍）を選んで「書き出し」を押すと、文字の画像を保存できます。
SNS の画像やスライドなど、CSS を書けない場所ではこちらを使ってください。