CSS グラデーション文字生成

機能

• 線形・放射状・円錐の三種類
• 2〜4 色のストップ。各色の位置を調整できます
• 角度は調整可能で、線形と円錐の両方に効きます
• リアルタイムの文字プレビュー。1 文字でも色でも即座に再描画
• 標準と -webkit- の両方の背景クリップ宣言を出力
• 文字を打てばそのままプレビュー。空のときは案内を表示
• 出力コードに @supports not のフォールバックを含みます
• 出力コードに ::selection の選択ハイライト補正を含みます
• 計算はすべてブラウザー内で完結し、何も送信されません

使い方

1. まず種類を選び、角度を調整します
2. ピッカーで開始色と終了色を選び、必要なら中間ストップにチェックを入れます
3. 入力欄に文字を打ち、プレビューを確認します
4. 下の CSS をコピーします。接頭辞・フォールバック・補正もすべて入っています

よくある質問

グラデーション文字が丸ごと消えたのはなぜですか？

ほぼ確実に `background-clip: text` の指定漏れです。文字にグラデーションが見えるのは、背景を文字の形に切り抜いているからで、`color: transparent` は文字自体を透明にしているだけです。どちらかが欠けると、グラデーションが見えないか、文字が丸ごと消えるかのどちらかになります。本ツールは必ず両方を一緒に出力するので、ここからコピーしたコードが片方だけになることはありません。もう 1 つの可能性はクリップ非対応のブラウザーで、その場合は出力コードの `@supports not` のフォールバックを使ってください。

文字を選択してもハイライトが見えないのはなぜですか？

文字自体が透明で、`::selection` はその透明な層を染めるだけなので、ハイライトが見えないのです。対処は選択状態で見える色を戻すことです。出力する `.gradient-text::selection` は `color` と `-webkit-text-fill-color` の両方を設定します。後者が WebKit 系で実際に読まれる指定です。

なぜ -webkit- 接頭辞が必要なのですか？

`background-clip: text` は今もすべてのブラウザーが既定で理解する標準とは言えず、Safari / WebKit は `-webkit-background-clip` しか解釈しません。標準の書き方だけだと、それらのブラウザーではクリップが丸ごと無効になり、文字が見えなくなる可能性が高いです。そこで両方を書き、各ブラウザーが必要なほうを取ります。

長い段落にも使えますか？

おすすめしません。背景クリップは要素全体にグラデーションを敷いて文字の形に切り抜くので、行が増えるほどグラデーションが大きく伸び、行ごとに違う色の部分に当たって読みにくくなります。背景の色によって可読性も大きく揺れます。見出し、ボタンのラベル、ロゴのような短いテキストに向いています。長い段落なら単色にするか、強調したい語だけに使うほうが安全です。