CSS/JavaScriptで作る！時間で背景が変わるグラデーション

2025年3月22日

Webページの雰囲気を、もっと変わった感じにしたい・・・
そんなときにおすすめなのが、時間によって背景がじわっと変化するグラデーション背景の演出です。

この記事では、JavaScriptとCSSを使って、数秒ごとに背景グラデーションがなめらかに切り替わる演出を紹介します。

このページの背景でも、実際にその演出が動いています。
リアルタイムで動きを体験しながら、仕組みを理解していきましょう。

背景グラデーションを「時間で切り替える」とは？

CSSではアニメーションはできても、「時間経過で別のグラデーションに切り替える」ようなことは基本的にできません。

そこでJavaScriptで制御することで、以下のような流れで自然な背景の切り替えを実現します：

背景用のレイヤー（div）を2つ重ねて配置
JavaScriptでランダムにグラデーションを選ぶ
opacityを使ってフェード切り替えする

貼るだけで動く！完成コード

HTMLコード

<!-- 背景レイヤー2つと見出し -->
<div id="bg1" class="background"></div>
<div id="bg2" class="background"></div>

CSSコード

body {
    margin: 0;
    /*高さが足りない時に設定
    min-height: 100vh;
    overflow: hidden;
　　*/
  }

  .background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: opacity 2s ease-in-out;
    background: linear-gradient(135deg, #1a1a1a, #2c2c2c);
  }

  #bg1 {
    opacity: 1;
  }

  #bg2 {
    opacity: 0;
  }

JavaScriptコード

  const gradients = [
    "linear-gradient(135deg, #0f2027, #203a43, #2c5364)",
    "linear-gradient(180deg, #232526, #ffffff,#414345,#ffffff)",
    "linear-gradient(135deg, #141e30,#dddddd, #243b55)",
    "linear-gradient(150deg, #ffffff,#000000, #434343)",
    "linear-gradient(180deg, #1c1c1c, #ff0000,#383838)",
    "linear-gradient(135deg, #2b5876, #4e4376,#ff00ff,#141e30,#0f2027)"
  ];

  const bg1 = document.getElementById("bg1");
  const bg2 = document.getElementById("bg2");

  let isBg1Visible = true;

  setInterval(() => {
    const nextGradient = gradients[Math.floor(Math.random() * gradients.length)];

    if (isBg1Visible) {
      bg2.style.background = nextGradient;
      bg2.style.opacity = 1;
      bg1.style.opacity = 0;
    } else {
      bg1.style.background = nextGradient;
      bg1.style.opacity = 1;
      bg2.style.opacity = 0;
    }

    isBg1Visible = !isBg1Visible;
  }, 6000);

コードのポイント解説

.backgroundを2つ用意して、交互に表示することで切り替えを演出
opacityでフェードするので、カクカクせず自然な印象
gradients配列にお好みのグラデーションを追加すれば、自由に変更可能
6秒ごとにランダムで背景が切り替わる仕組みになっています

カスタマイズ例：色・時間・効果を変える

以下のポイントを変えることで、演出を好みに合わせてカスタマイズできます：

gradients[]の色を変更 → 表現の雰囲気を変える（季節、ブランドカラーなど）
setInterval(..., 6000) → 6秒→10秒、など調整可能
transition: opacity → 時間を2秒→3秒にして、もっとゆったりとした切り替えに

`gradients[]`の色を変更

下記コードのgradients[]配列の中の色を変更します。また、グラデーション行を追加することも可能です。

const gradients = [
    "linear-gradient(135deg, #0f2027, #203a43, #2c5364)",
    "linear-gradient(180deg, #232526, #ffffff,#414345,#ffffff)",
    "linear-gradient(135deg, #141e30,#dddddd, #243b55)",
    "linear-gradient(150deg, #ffffff,#000000, #434343)",
    "linear-gradient(180deg, #1c1c1c, #ff0000,#383838)",
    "linear-gradient(135deg, #2b5876, #4e4376,#ff00ff,#141e30,#0f2027)"
  ];

下記ページのグラデーションジェネレーターを利用して、色を変更してみましょう

切り替えのタイミングを変更する

下記の数値は「ミリ秒（1000 = 1秒）」です。
たとえば10秒ごとにしたい場合は 10000 に変更すればOKです。

setInterval(..., 6000);

この setInterval() は、一定の時間ごとに処理をくり返すための関数です。

setInterval(関数, 間隔);

関数：繰り返し実行したい処理（今回は背景の切り替え）
間隔：繰り返す時間（ミリ秒で指定。1000 = 1秒）

フェードのスピードを調整する

下記のCSSコードの2s を 3s や 4s に変更すると、よりゆっくりと切り替わる演出になります。

transition: opacity 2s ease-in-out;

背景の重ね方を少し工夫する

デザインによっては、背景にぼかしやフィルター、動く模様を追加したくなるかもしれません。
その場合は .background に以下のようなスタイルを加えてみてください：

.background{
    filter: blur(4px);
    mix-blend-mode: overlay;
}

または、背景画像とグラデーションを重ねるなどの応用も可能です。

URLをコピーしました！