シマー（光沢流れ）テキスト
シマー（光沢流れ）テキストは、文字の塗りに明るいハイライトが左から右へ繰り返し流れる装飾です。仕組みは、横方向のグラデーションを background-clip:text で文字の形に切り抜き、 color:transparent で本来の文字色を透明にして背景だけを見せています。
解説
シマー（光沢流れ）テキストは、文字の塗りに明るいハイライトが左から右へ繰り返し流れる装飾です。仕組みは、横方向のグラデーションを background-clip:text で文字の形に切り抜き、color:transparent で本来の文字色を透明にして背景だけを見せています。そのうえで @keyframes により background-position を動かすと、光沢部分が文字の上を滑っていくように見えます。JavaScript は不要で、暗い背景に置くとブランドキャッチが上品に輝きます。
使いどころ
- ロゴ近くのブランド名や「PREMIUM」などのキャッチ
- 高級感・特別感を出したいヒーローの一語
- 限定キャンペーンの見出しのワンポイント
光沢の色味はグラデーションの色を変えるだけで調整できます。流れる速さは animation の秒数を増減して制御します。background-clip:text は -webkit- 接頭辞も併記すると幅広いブラウザで安定します。多用すると読みづらく安っぽくなるため、画面内で 1 語だけに絞るのが上品です。動きを抑えたい利用者に配慮し、prefers-reduced-motion でアニメーションを止める指定を足すとより親切です。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
光沢が流れる速さを変えられますか？
はい。アニメーションの秒数（サンプルでは2.5s）を小さくすると速く、大きくするとゆっくり流れます。落ち着いた高級感を出すなら少し遅めがおすすめです。
明るい背景でも使えますか？
使えますが、光沢の明暗差が出にくく効果が弱まります。このサンプルのように濃い背景の方がハイライトが映えます。明るい背景ではグラデーションの色を濃淡のある配色に調整してください。