class=”grade” をつけるだけで綺麗な背景グラデーションをつけるライブラリ作りました。

まずこのgradetion.jsを保存してください

/**
 * Gradation.js - スムーズに切り替わるグラデーション背景ライブラリ
 * class="grade" - アニメーションありのグラデーション背景（ランダムな開始グラデーション）
 * class="grade1" ~ "grade6" - アニメーションなしの静的グラデーション背景
 * @version 1.2.0
 * @author GitHub Copilot
 */
(function() {
  // グラデーションの定義
  const gradients = [
    'linear-gradient(to right, #ff8585, #def493)',
    'linear-gradient(to right, #9ffedb, #1552f9)',
    'linear-gradient(to right, #f6ffc7, #f4a7f4)',
    'linear-gradient(to right, #eae5ff, #cff4fd)',
    'linear-gradient(to right, #eae5ff, #ffb495)',
    'linear-gradient(to right, #dcff99, #dedeff)'
  ];

  // oklchバージョン（対応ブラウザ用）
  const gradientsOklch = [
    'linear-gradient(to right in oklch, #ff8585, #def493)',
    'linear-gradient(to right in oklch, #9ffedb, #1552f9)',
    'linear-gradient(to right in oklch, #f6ffc7, #f4a7f4)',
    'linear-gradient(to right in oklch, #eae5ff, #cff4fd)',
    'linear-gradient(to right in oklch, #eae5ff, #ffb495)',
    'linear-gradient(to right in oklch, #dcff99, #dedeff)'
  ];

  // 現在のブラウザがoklchに対応しているか確認
  const supportsOklch = CSS.supports('color', 'oklch(0.5 0.2 0)');
  const gradientList = supportsOklch ? gradientsOklch : gradients;

  // スタイルを動的に追加
  const style = document.createElement('style');
  style.textContent = `
    /* 共通スタイル */
    .grade, [class^="grade"] {
      position: relative;
      overflow: hidden;
      z-index: 0;
    }

    /* アニメーション付きグラデーション */
    .grade {
      /* CSS変数でグラデを受け取る。初期値はデフォルトで、後でJSで上書き */
      --g1: ${gradientList[0]};
      --g2: var(--g1);
    }

    .grade::before,
    .grade::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: opacity 2.5s ease-in-out;
      z-index: -1;
    }

    .grade::before {
      background: var(--g1);
      opacity: 1;
    }

    .grade::after {
      background: var(--g2);
      opacity: 0;
    }

    .grade.fade-next::after {
      opacity: 1;
    }

    /* 静的グラデーション (grade1-grade6) */
    .grade1 {
      background: ${gradientList[0]};
    }
    .grade2 {
      background: ${gradientList[1]};
    }
    .grade3 {
      background: ${gradientList[2]};
    }
    .grade4 {
      background: ${gradientList[3]};
    }
    .grade5 {
      background: ${gradientList[4]};
    }
    .grade6 {
      background: ${gradientList[5]};
    }

    /* コンテンツは前面に */
    .grade > *, [class^="grade"] > * {
      position: relative;
      z-index: 1;
    }
  `;
  document.head.appendChild(style);

  /**
   * ランダムな整数を生成（0からmax-1の範囲）
   * @param {number} max - 最大値（この値は含まない）
   * @returns {number} - ランダムな整数
   */
  function getRandomInt(max) {
    return Math.floor(Math.random() * max);
  }

  /**
   * グラデーション背景をクロスフェード切り替え
   * @param {Object} options - 設定オプション
   * @param {number} options.intervalMs - 背景切り替え間隔（ミリ秒）
   * @param {number} options.fadeMs - フェード時間（ミリ秒）
   * @param {Array<string>} options.gradients - カスタムグラデーション配列（オプション）
   */
  function startGradationCrossfade(options = {}) {
    const config = {
      intervalMs: options.intervalMs || 5000,
      fadeMs: options.fadeMs || 2500,
      gradients: options.gradients || null
    };

    // 使用するグラデーションリスト
    const customGradientList = config.gradients || gradientList;

    // class="grade"を持つすべての要素にグラデーションを適用
    document.querySelectorAll('.grade').forEach(el => {
      // ランダムな開始インデックスを生成
      let idx = getRandomInt(customGradientList.length);

      // 初期グラデを CSS変数にセット（ランダム）
      el.style.setProperty('--g1', customGradientList[idx]);
      el.style.setProperty('--g2', customGradientList[idx]);

      setInterval(() => {
        const next = (idx + 1) % customGradientList.length;

        // 次の背景を --g2 にセット
        el.style.setProperty('--g2', customGradientList[next]);

        // クロスフェード開始
        el.classList.add('fade-next');

        // フェード完了後に g1←g2 にしてリセット
        setTimeout(() => {
          el.style.setProperty('--g1', customGradientList[next]);
          el.classList.remove('fade-next');
          idx = next;
        }, config.fadeMs);
      }, config.intervalMs);
    });
  }

  // DOMContentLoadedイベントで自動実行
  document.addEventListener('DOMContentLoaded', function() {
    // グローバルに設定がある場合はそれを使用
    const options = window.gradationOptions || {};
    startGradationCrossfade(options);
  });

  // ライブラリをグローバルに公開
  window.Gradation = {
    start: startGradationCrossfade,
    gradients: gradients,
    gradientsOklch: gradientsOklch,
    // ユーティリティ関数も公開
    getRandomGradient: function() {
      return gradientList[getRandomInt(gradientList.length)];
    }
  };
})();

次に、
どんなHTMLでもいいので読み込んで

<script src=”gradation.js”></script>と１行headの中にでも読み込んで
あとは背景をつけたいブロックにclass=”grade”とつけましょう。

そうすると

グラデーションをつけたくなかったら

class=”grade1″と書くと
1番目のグラデーション背景が固定で使えます。
同じようにgrade6まで使えます

たとえば4番目の色の場合は

<div class="code">
<div class="grade4">
こんな風に書くだけ
</div>
</div>

固定のグラデーションになりますね

webにはさまざまな色がありますが
背景と文字のコントラスト比を1:4.5以上にすると文字が見えやすくなります。