Text Gradient Generator

使い方

1. 見本の文字を入力し、文字サイズをピクセルで設定します。
2. 4 つの色の停止点を選びます。角度に沿って順に並び、1 番目が始点、4 番目が終点です。
3. 角度を度で設定します。0 は下から上、90 は左から右、180 は上から下です。
4. 変更するたびプレビューが更新されるので、CSS を生成を押してスタイルシートと HTML スニペットをコピーします。

こんなときに

• ヒーローの見出し —— ランディングページの主見出しにグラデーションを試せます。
• ロゴタイプ —— 素材を書き出す前に、ブランドカラーを文字で確かめられます。
• SNS のバナー —— カバー画像のグラデーションとサイトの見出しをそろえます。
• CSS の学習 —— background-clip: text と color: transparent の組み合わせを学べます。

プライバシーについて

生成ツールは純粋なブラウザー内の JavaScript です。色の入力は linear-gradient の文字列を作り、見本の span に適用するだけで、スタイルがどこかに送信されることはなく、オフラインでも使えます。

FAQ

Q: CSS のグラデーション文字の仕組みは？ A: グラデーションを要素の背景に設定し、background-clip: text で背景を文字の形に切り抜き、color: transparent で文字本来の色を透明にして、背景を透かして見せています。

Q: 対応しないブラウザーでは？ A: 現在のブラウザーは標準プロパティーに対応しています。古い実行環境では文字が本来の色のまま残るため、コピーする CSS は標準的な記述にして安全に退化できる形にしています。

Q: 2 色より多く使えますか？ A: 使えます。CSS のグラデーションは停止点の数に制限がなく、4 つのピッカーで 2 色・3 色・4 色のどれでも作れます。

Q: グラデーションは画像として保存されますか？ A: いいえ。出力は純粋な CSS なので、文字は選択も検索もでき、拡大しても常に鮮明です。