アニメーショングラデーション

background-position をアニメーションさせ、4色のグラデーションが無限にループする背景。ヒーローセクションやランディングページの土台に使えます。

#css#animation#gradient

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- FlowDesk：アニメグラデを土台にしたSaaSヒーロー -->
<section class="fd-hero">
  <!-- 主役：無限ループするアニメーショングラデーション -->
  <div class="fd-hero__bg" aria-hidden="true"></div>
  <div class="fd-hero__grain" aria-hidden="true"></div>

  <header class="fd-nav">
    <div class="fd-logo">Flow<span>Desk</span></div>
    <nav class="fd-links">
      <a href="#">機能</a>
      <a href="#">料金</a>
      <a href="#">導入事例</a>
    </nav>
    <button class="fd-nav__cta" type="button">無料で始める</button>
  </header>

  <div class="fd-hero__inner">
    <span class="fd-badge">▲ 新機能：AIタスク要約</span>
    <h1 class="fd-title">チームの仕事を、<br>ひとつの画面に。</h1>
    <p class="fd-sub">タスク・ドキュメント・チャットを束ねる次世代ワークスペース。今日から30秒でセットアップ。</p>
    <div class="fd-actions">
      <button class="fd-btn fd-btn--main" type="button" id="fdStart">14日間無料トライアル</button>
      <button class="fd-btn fd-btn--ghost" type="button">デモを見る</button>
    </div>
    <p class="fd-note">クレジットカード不要・いつでも解約可</p>
  </div>
</section>

CSS

/* FlowDesk：紺×青の世界観。主役はループするアニメグラデーション */
* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: "Segoe UI", "Hiragino Sans", system-ui, sans-serif; }

.fd-hero {
  position: relative;
  min-height: 400px;
  height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: #0f1b34;
}

/* ★主役：background-position を流して4色グラデを無限ループ */
.fd-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg, #0f1b34, #1c3a7a, #4f7cff, #16224a, #0f1b34);
  background-size: 300% 300%;
  animation: fdFlow 14s ease infinite;
}
@keyframes fdFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 上質感を足す微細ノイズ */
.fd-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.06;
  background-image: radial-gradient(rgba(255,255,255,0.8) 0.5px, transparent 0.5px);
  background-size: 4px 4px;
  pointer-events: none;
}

/* ナビ */
.fd-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 26px;
}
.fd-logo { font-weight: 800; font-size: 18px; letter-spacing: 0.01em; }
.fd-logo span { color: #7fa0ff; }
.fd-links { display: flex; gap: 20px; margin-left: 8px; }
.fd-links a {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s ease;
}
.fd-links a:hover { color: #fff; }
.fd-nav__cta {
  margin-left: auto;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #0f1b34;
  background: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.fd-nav__cta:hover { transform: translateY(-2px); }

/* ヒーロー本体 */
.fd-hero__inner {
  position: relative;
  z-index: 2;
  margin: auto;
  text-align: center;
  padding: 0 24px;
  max-width: 560px;
}
.fd-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  color: #cfe0ff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fd-title {
  margin-top: 16px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.fd-sub {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,0.9);
}
.fd-actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.fd-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fd-btn--main {
  color: #fff;
  background: linear-gradient(135deg, #4f7cff, #6f5cff);
  border: none;
  box-shadow: 0 10px 28px rgba(79,124,255,0.5);
}
.fd-btn--main:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(79,124,255,0.6); }
.fd-btn--main:active { transform: scale(0.98); }
.fd-btn--ghost {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.3);
}
.fd-btn--ghost:hover { background: rgba(255,255,255,0.16); }
.fd-note { margin-top: 12px; font-size: 11px; color: rgba(255,255,255,0.6); }

@media (prefers-reduced-motion: reduce) {
  .fd-hero__bg { animation: none; background-position: 50% 50%; }
  .fd-btn, .fd-nav__cta { transition: none; }
}

JavaScript

// トライアルCTAの軽いフィードバック（SaaSの申込み体験を演出）
const startBtn = document.getElementById("fdStart");

if (startBtn) {
  startBtn.addEventListener("click", () => {
    const label = startBtn.textContent;
    startBtn.textContent = "登録メールを送信しました ✓";
    startBtn.disabled = true;
    // 数秒で元に戻す
    setTimeout(() => {
      startBtn.textContent = label;
      startBtn.disabled = false;
    }, 1800);
  });
}

実装ガイド

使いどころ

ランディングページやヒーローセクションの土台、SaaSや個人サイトのファーストビューに。CSSだけで動く軽い演出なので、画像を用意せず色だけでブランドの雰囲気を出したいときに向きます。

実装時の注意点

アニメーション対象は合成のみで完結する background-position なのでレイアウトを再計算せず比較的軽量ですが、背景の塗り替えは GPU 合成に乗りにくくモバイルでは発熱・電池消費に注意。前面のガラスカードに backdrop-filter を併用する場合は重なり負荷が増えます。グラデ上の白文字は領域によってコントラストが変動するため text-shadow や半透明スクリムで AA を確保してください。

対応ブラウザ

linear-gradient と background-position の CSS アニメーションは全モダンブラウザ（Chrome/Edge/Firefox/Safari）で安定動作します。ガラスカードの backdrop-filter は Safari で -webkit- プレフィックス併記が安全で、サンプルでも両方記述しています。

よくある失敗

background-size を 100% のままにすると position を動かしても見た目が変化しません（200〜300% に拡大して初めて流れます）。prefers-reduced-motion の停止指定を忘れると動きに弱いユーザーへの配慮が欠けます。色数を増やしすぎると濁って見えるので 3〜4 色に絞るのが無難です。

応用例

色を企業カラーへ差し替えてブランドヒーローに、アニメーション速度を上げてエラーページの遊び心に、background-clip:text と組み合わせて見出し文字自体を流れるグラデにする応用も定番です。

コード