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

CSSグラデーションテキストジェネレーターは、純粋なCSSを使ってグラデーションテキスト効果を作成します。コンテナの背景グラデーションを作成するCSSグラデーションジェネレーターとは異なり、このツールは background-clip: text テクニックを使用してテキストに直接グラデーション塗りを適用することに特化しています。結果はスムーズな色の遷移を持つ目を引く見出しテキストで、どの画面でも完璧にスケールします。

このテクニックは、テキスト要素の background にCSSグラデーションを設定し、-webkit-background-clip: text で背景をテキストの形にクリップし、-webkit-text-fill-color: transparent でテキスト自体を透明にすることで動作します。このアプローチはChrome、Firefox、Safari、Edgeを含むすべての最新ブラウザでサポートされています。

本ツールは3つのCSSグラデーションタイプすべてをサポートしています：リニア（任意の角度で線に沿って色が遷移）、ラジアル（中心点から外側に色が放射）、コニック（中心点の周りを色が掃引）。グラデーションあたり最大8つのカラーストップを追加し、正確な位置を設定し、ドラッグして並べ替えることができます。

オプションのアニメーションモードは、CSSキーフレームアニメーションを使用して動くグラデーション効果を追加します。ヒーローセクション、ランディングページの見出し、または注目を引きたいCTAエレメントに最適です。速度と方向を調整して完璧な効果を得られます。

生成されたCSSにはクロスブラウザ互換性のための必要なベンダープレフィックスがすべて含まれています。Tailwind CSS出力も提供され、可能な場合はTailwindユーティリティクラスにマッピングし、複雑なグラデーションの場合は任意値にフォールバックします。すべての処理はクライアントサイドで実行され、データがブラウザの外に出ることはありません。

1. グラデーションタイプを選択します：リニア、ラジアル、またはコニック。
2. リニアおよびコニックグラデーションの場合、ビジュアル角度ピッカーまたはスライダー（0–360度）で角度を設定します。
3. カラーストップを追加、削除、変更します。各ストップにはカラーピッカー、Hex入力、位置スライダーがあります。ドラッグしてストップを並べ替えます。
4. または、プリセットパネルからプリセットグラデーションを選択して素早くインスピレーションを得ます。
5. プレビューテキストをクリックするかテキスト入力フィールドを使用して直接カスタマイズします。フォントサイズ、太さ、ファミリー、配置、文字間隔、行の高さを調整します。
6. アニメーションをオンにして動くグラデーション効果を追加します。速度と方向を設定します。
7. コピーボタンで生成されたCSSまたはTailwindクラスをコピーするか、Ctrl+Shift+C でCSSをコピーします。