背景を動くグラデーションにするCSSアニメーション 6パターン
背景に動くグラデーションを設置してみましょう！
WEBページの背景になにか追加したいとき、何を設定していますか？
海外のHPではよく見かけますが、記憶に残るように印象的なグラデーション背景を使っていることがあります。
ページ全体に設定するというよりも、ポイントで目立たせたい時に使っていることが多いとは思いますが…。
日本のHPではグラデーションを使っているイメージが少ないので、使ってみたい方も多いのではないでしょうか？
なので、今回はグラデーションが動くアニメーション背景を６つご紹介したいと思います。
色や動く角度を変えるだけで無限のパターンが作れるので、一度実装してみてください♪
よく読まれている記事
横方向に変化する青系グラデーション背景
海のように青色のグラデーションが横方向に行ったり来たりする背景アニメーションです。
アニメーションのスピードを5sにしているので、ゆっくりと切り替わるようになっています。
さりげなくグラデーションを使いたいときにおすすすめの実装です。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
縦方向に変化するピンク系グラデーション背景
ピンク色のグラデーションが縦方向に上がったり下がったりする背景アニメーションです。
縦方向に切り替わることで、スクロールの縦の動きとも相性がいいと思います。
コンテンツを他より少し目立たせたいときに最適です。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
斜め方向に変化する虹色グラデーション背景
虹色のグラデーションが斜め方向に少しずつ変化する背景アニメーションです。
流れるように色が変化していくので、見ていて気持ちがいいし、ユーザーの目に留まりやすくなります。
キャンペーンやセールなど、特別感を演出したいときに使いたいですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
いろんな色に変化するグラデーション背景
画面全体がいろんな色に切り替わるような背景アニメーションです。
今までのグラデーションとは違って、画面上には1色しか表示されていませんが、ゆっくりといろんな色に変化することでグラデーションを表現しています。
前面のテキストを常にはっきりと見せたいときにはこれがおすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
銀色に光るようなグラデーション背景
銀色のグラデーションが横方向に流れるように変化する背景アニメーションです。
グレー系の色のグラデーションを作ることで、銀色のテープのような背景を作ることができます。
白とグレーの配分を調整することで、さらにキラキラと光るグラデーションを作ることも可能です。
メタリックな表現をしたいときや、バッジなどの背景色に設定するのもおしゃれです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
金色に光るようなグラデーション背景
金色のグラデーションが横方向に流れるように変化する背景アニメーションです。
銀色のグラデーションよりも2色増やして作っているので、さらにキラキラと目立つ背景にしてみました。
明度や彩度を細かく調整することで、よりリアルな金色を表現することができます。
ページの中で一番目立たせたいコンテンツの背景の実装に最適です。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回は簡単に実装できるようにCSSアニメーションで背景グラデーションを６パターン作ってみました。
グラデーションは何色で作ってもページ全体が一気に華やかになります。
グラデーションには少なくとも2色以上の色を使っているので、多用するとページ全体がごちゃごちゃした印象になってしまうので注意が必要です。
実装する場合は、周りのコンテンツとの相性を考えながら使用してみてください。
次回はjsも使ってより複雑なグラデーション背景をご紹介したいと思います。
キラッと光るような魅力的なグラデーションをどんどん活用していきましょう♪
最後までご覧いただきありがとうございました☆彡