CSS 虹色テキスト

機能

• グラデーションを文字の形に切り抜く（`background-clip: text`）。成果物は CSS 1 段落
• 色帯は 2〜12 で調整可能。停止位置をパーセントで明示するため配置が決定的
• 方向は左から右・上から下・斜め 135°・右から左
• 彩度と明度を調整でき、明るい背景でも暗い背景でも適切な設定が見つかる
• `-webkit-` 付きの宣言も併記するので Safari や旧 Chrome でも表示される
• プレビューを確認してからコピー
• 成果物には `.rainbow-text` セレクタが付き、そのまま貼れる
• 処理はすべてブラウザ内で完結し、入力した文字は送信されません

使い方

1. 上の入力欄に文字を入力します
2. グラデーションの向きと色帯の数を選びます
3. 彩度と明度を調整して濃さを決めます
4. CSS をコピーして見出しに貼ります

よくある質問

「矩形の色が文字に乗っている」あるいは「文字がまったく見えない」のはなぜですか？

どちらも宣言の欠落が原因で、しかも理由は正反対です。矩形の色が見えるのは背景が文字の形に切り抜かれていない場合 —— `background-clip` の宣言が欠けています（Safari や旧 Chrome が認めるのは `-webkit-` 付きのほうなので、そちらも必要です）。文字が見えないのは文字色がどいていない場合 —— `color: transparent` が欠けており、不透明な文字色がグラデーションを覆って空白に見えています。上に示した完全なルールにはすべて含まれています。

1 文字ずつ色を付けてはだめですか？

1 文字ずつ色を付けるには全文字を `<span>` で包む必要があり、HTML 構造の変更になります。この手のツールの成果物は CSS で、プレビューの文字はページが `textContent` で書き込みます。モジュールは DOM を取得できませんし、すべきでもありません。`background-clip: text` が標準解であり、成果物も長持ちします。CSS とクラス名ならどんな見出しにも貼れますが、span を挿す方法は文言が変わるたび、あるいは内容が CMS から来る場合に作り直しになります。

span で文字を包むと色が消えるのはなぜですか？

文字はクラスを付けた要素自身に置く必要があるからです。`background-clip: text` が切り抜くのはその要素自身の背景で、子要素の中の文字は対象外なので自分の文字色のまま表示されます（`color: transparent` も効きません。欠けているのはそのグリフの下にある親の背景だからです）。したがって `<h1 class="rainbow-text">見出し</h1>` は正しく、その中に `<span>` を足すと誤りになります。