CSSグラデーションテキスト

CSSグラデーションテキストについて

グラデーションテキストは、テキストの背景にグラデーションを描画し、background-clip: text（とプレフィックス付き -webkit-background-clip: text）で字形にクリッピングして作成します。テキストの色自体は -webkit-text-fill-color: transparent で透明にします。本ツールは必要なベンダープレフィックス付きルールをすべて生成し、モダンブラウザ全体で動作します。

制御できるプロパティ

• テキストとサイズ — ラベルとフォントサイズ。
• カラー — 2つまたは3つのグラデーションストップ。
• 方向 — 線形グラデーションの角度またはキーワード。
• 太さ — フォントの太さ（300〜900）。

使い方

1. グラデーションで塗りつぶすテキストを入力。
2. フォントサイズと太さを設定。
3. 2色（必要なら3色）を選択。
4. 方向を選択。
5. CSSをコピー をクリックしてスタイルシートに貼り付け。

よくある質問

テキストが消えるのはなぜですか？ -webkit-text-fill-color: transparent（または color: transparent）を忘れると、グラデーションが単色テキストの裏に隠れます。生成されたCSSには両方含まれています。

background-clip: text はどこでもサポートされていますか？ -webkit- プレフィックスで全モダンブラウザで動作します。Firefoxはプレフィックスなしもサポートしています。

グラデーションをアニメーションできますか？ はい — より大きなbackground-sizeと組み合わせて background-position をアニメーションすると流れる効果が得られます。