Preview

CSSのみで実装された、滑らかに色が変化する美しいアニメーション付きのグラデーション背景です。キーフレームアニメーションを使用して背景位置を移動させることで、流れるような色の変化を表現しています。

実装コード

以下のコードをコピーして、プロジェクトで使用してください。

<div class="animated-gradient-bg"></div>

.animated-gradient-bg {
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    45deg,
    #ff7b00,
    #ff0055,
    #a200ff,
    #0055ff,
    #00ffcc
  );
  background-size: 400% 400%;
  animation: gradient-flow 15s ease infinite;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

解説

このアニメーション背景のポイントは以下の2点です：

background-size: 400% 400%: グラデーションのサイズを要素の4倍に設定し、描画領域外に広げています。
@keyframes gradient-flow: background-position を 0% から 100%、そして 0% へと滑らかに移動させることで、広げたグラデーションが移動し、色が変化しているように見せています。

linear-gradient の色や animation の秒数を変更することで、サイトのテーマに合わせたカスタマイズが可能です。