こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今日は、CSSの filter: hue-rotate() を使って「文字の色がじわじわ変わる」アニメーション装飾について解説します。
ボタンや見出しの強調にも使えて、ちょっとした動きでサイトの印象がガラッと変わります。
今回はコピペですぐ使えるコードと、色相アニメーションを自然に見せるコツまでまとめました。
ぜひあなたのデザインにも取り入れてみてください。
filter: hue-rotate()とは？
filter: hue-rotate() は、色相（Hue）を回転させて色を変化させる CSS プロパティです。指定した角度のぶん、色相環に沿って色がシフトしていきます。
ポイントは、対象要素の色を“塗り替えずに”色相だけ変えるところ。
グラデーションテキストにも適用できるため、他の CSS では出せない自然でカラフルな動きが表現できます。
実装サンプル（コピペOK）
以下のコードをそのまま貼るだけで、「じわじわ色が変わる文字装飾」が完成します。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
字の太さやフォントを変えるだけでも雰囲気が変わるので、いろいろ試してみてください。
背景グラデーション × hue-rotate で映えるテキストに
filter は「要素全体」にかかるため、背景グラデーションの上で使うとよりユニークな効果になります。
例えばこんな感じのテキストに。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
グラデーションを hue-rotate で回すと、固定色よりも幻想的な変化が生まれます。
「サイトトップのキャッチコピーだけ動かしたい」
そんなときにもぴったりです。
アニメーションを自然に見せるコツ
- 変化速度は 3〜6 秒程度が自然
- linear を使うと違和感のない回転になる
- 文字数が少ないほうが視認性が高い
- 長文には向かないので見出し・短文向け
特に「色の移り変わりが目立ちすぎる」場合は、速度を少し伸ばす（6〜10 秒）と落ちついた印象になります。
ボタンに応用するサンプル
ホバー時だけ色が変わる装飾も簡単です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
普段は落ち着いた見た目で、ホバー時にだけ鮮やかに変化するため、遊び心がありつつも使いやすいデザインです。
まとめ
filter: hue-rotate() を使うと、CSS だけで・幻想的な色変化
・滑らかなアニメーション
・背景グラデとの相性抜群
といった文字装飾が簡単に実現できます。
特に「動きのあるアクセントを少しだけ足したい」というときに活躍するテクニックです。
あなたのサイトでも、ぜひ心地よい彩りを試してみてください。
satokotadesignキャンペーン実施中！
