シャイン光沢スイープ見出し
これは金属光沢のような光が文字の上を横切るプレミアム表現の見出しです。文字色を transparent にし、金色の linear-gradient を background-clip:text で文字の形に切り抜いて反映させています。
解説
これは金属光沢のような光が文字の上を横切るプレミアム表現の見出しです。文字色をtransparentにし、金色のlinear-gradientをbackground-clip:textで文字の形に切り抜いて反映させています。グラデーションの幅をbackground-size:200%に広げ、background-positionを流すことで、ハイライトが左から右へ滑っていくように見せています。CSS のみで JavaScript は不要です。
動きはlinearで一定速度のため、商材を邪魔しない上品な反復になります。
使う場面とカスタマイズ
- コーポレートやブランドのキービジュアル、高級商材の見出し
- 金色以外にしたいときは
linear-gradientの色を差し替える - 流れる速さは
animationの 3.5 秒を増減して調整
注意点として、background-clip:textは-webkit-付きの指定もそろえる必要があり、暗い背景の方が光沢が映えます。グラデーションのコントラストが弱いと文字が読みにくくなるので、明暗の差を確保してください。常時動くため、prefers-reduced-motionでは静止したグラデーションにとどめると親切です。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
金色以外の光沢色にできますか
できます。shine-title の linear-gradient に並ぶ色（標準では金とクリーム色）を、シルバーやブルー系などに差し替えれば光沢の色味が変わります。背景が暗いほど光の筋が際立つので、明るい背景に置く場合はコントラストを意識してください。
光が流れる速さを変えられますか
変えられます。animation の 3.5s を小さくすると光が速く横切り、大きくするとゆっくり上品に流れます。background-size を 200% より広げると一度に見える光の幅も変わります。動きを抑えたい場合は animation を外して静止したグラデーションにできます。