文字にグラデーション
background-clip: text
文字そのものを塗り分ける。見出し1行の印象を変えるいちばん軽い手。
AIへの頼み方
見出しの文字にグラデーションをかけてください。background-clip: text を使い、Firefox 向けに -webkit- を併記してください。@supports で、対応していないブラウザには単色の文字色を出すフォールバックも入れてください。
動くデモ
右下のボタンで再生と停止を切り替えられます。動きを減らす設定の端末では停止した状態で始まります。
全画面で見る ↗最小コード
.headline {
/* 1. 文字の後ろに敷くグラデーション */
background-image: linear-gradient(100deg, #5F7A30, #35E3C9, #B05328);
/* 2. その背景を「文字の形」で切り抜く
Firefox は無印が未実装なので -webkit- を必ず併記する */
-webkit-background-clip: text;
background-clip: text;
/* 3. 文字自体を透明にして、背景を透けさせる */
color: transparent;
}
/* 対応していないブラウザにはただの文字色を出す */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.headline { color: #31502A; background-image: none; }
}対応状況
要フォールバック 2026年08月時点で確認
無印プロパティは Firefox 未実装のため Baseline limited。実務では `-webkit-background-clip: text` を併記すれば Firefox 49+ / Safari 15.5+ を含め主要ブラウザで動く（caniuse グローバル 96.41%）。2026-08-16 の親裁定で初回12項目に残し、区分は「要フォールバック」とした。
-webkit- を併記すれば実案件で使える。単色のフォールバックは必ず添える。
対応状況は自動更新していません。確認日より後の変化はこのページに反映されていない場合があります。
使いどころ／避けどころ
見出し1行の印象を変えたいときに向く。トップページのキャッチコピー、章の大見出し、数字を大きく見せる箇所。画像を作らずに済むので、文言を変えても作り直しが要らない。文字として選択もコピーもできるので、検索にも読み上げにも影響しない。
-webkit- を必ず併記する。無印だけだと Firefox で文字が透明のまま消える。逆に併記さえすれば主要ブラウザで動く。ここを省くと事故になるので、この項目は「フォールバックを添えて使うもの」として扱っている。
避けたいのは本文に使うこと。長い文章にかけると読みにくいうえ、色の差が小さい箇所で文字が背景に沈む。使うのは1行から2行まで。
色の差を強くしすぎないのも大事になる。端から端まで大きく色を変えると、片方の端が背景と近づいて読めなくなる。同系色の濃淡くらいがちょうどいい。
ダークモードのあるサイトでは、明るい側と暗い側の両方で読めるか確かめる。片方だけ調整すると、もう片方で沈む。
動かす場合は、ゆっくり色が流れるくらいにとどめる。速いと目が疲れるので、動きを減らす設定の人には止めておく。