CSS背景グラデーションアニメーション｜色が動く背景をコピペ

2026年7月28日

生徒

背景の色がゆっくり動くグラデーション、あれオシャレですよね。CSSだけでできますか？

ペン博士

できるよ！background-sizeを大きくしてbackground-positionを@keyframesで動かすのが定番。今日はボタンや文字にも使えるパターンを渡すね。

「Webサイトの背景をダイナミックに動かしたい」「色がゆっくり流れるような演出を実装したい」——そんなときに活躍するのがCSSグラデーションアニメーションです。

動く背景は見る人に動きとリズムを感じさせ、ページを印象的に演出できます。JavaScriptを使わずCSSだけで実装できるため、パフォーマンス上も扱いやすい手法です。

ただし実装パターンが複数あり、それぞれに得意な動きと苦手な動きがあります。「background-positionを動かす定番手法」「@propertyで角度をアニメーションする方法」「conic-gradientを使った回転演出」など、目的に合った実装を選ぶ必要があります。

この記事では、CSSグラデーションアニメーションの主要パターンをすべてコピペできるコード付きで解説します。ボタンへの応用、パフォーマンス対策、ブラウザ対応の注意点まで幅広く取り上げます。

background-size + background-position を @keyframes で動かす定番手法
複数色の linear-gradient で豊かな色変化を作る方法
conic-gradient を回転させる演出
ボタンホバー時にグラデーションが移動する実装
@property で –angle をアニメーションする最新手法（対応ブラウザ注意）
GPU負荷を下げるパフォーマンス最適化のポイント

CSSグラデーションアニメーションの基本原理

CSSで background にグラデーションを設定するとき、グラデーション自体を直接アニメーションさせることはできません（ブラウザがグラデーション間の補間を行えないため）。

代わりにbackground-size を大きく設定して background-position を動かすことで、グラデーションが流れるように見える演出を作ります。これがCSSグラデーションアニメーションの定番手法です。

定番：background-position を動かす手法

基本の左右スクロールグラデーション

.gradient-animated {
  background: linear-gradient(
    90deg,
    #ff6b6b,
    #ffa500,
    #ffef00,
    #6bff6b,
    #00b4d8,
    #a855f7,
    #ff6b6b /* 最後に最初の色を繰り返すとシームレスにループ */
  );
  background-size: 300% 100%; /* 横に3倍大きくする */
  animation: gradientSlide 6s linear infinite;
}

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

<div class="gradient-animated" style="width:100%;height:300px;"></div>

background-size: 300% 100% と指定することで、グラデーションの実際の幅は表示領域の3倍になります。background-position を 0% から 100% へ動かすと、グラデーションが左から右へスクロールしているように見えます。

往復（行ったり来たり）するグラデーション

.gradient-bounce {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 25%,
    #f64f59 50%,
    #c471ed 75%,
    #667eea 100%
  );
  background-size: 400% 400%;
  animation: gradientBounce 8s ease infinite;
}

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

斜め方向に流れるグラデーション

.gradient-diagonal {
  background: linear-gradient(
    45deg,
    #f72585,
    #7209b7,
    #3a0ca3,
    #4361ee,
    #4cc9f0,
    #f72585
  );
  background-size: 300% 300%;
  animation: gradientDiagonal 10s ease infinite;
}

@keyframes gradientDiagonal {
  0%   { background-position: 0% 0%; }
  33%  { background-position: 100% 0%; }
  66%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

複数色グラデーションで豊かな色変化

グラデーションの色を増やすほど動きが豊かになります。シームレスにループさせるには、最後の色を最初の色と同じにするのがコツです。

サンセット風グラデーション

.sunset-gradient {
  background: linear-gradient(
    90deg,
    #ff9a9e 0%,
    #fecfef 20%,
    #ffeaa7 40%,
    #fd79a8 60%,
    #a29bfe 80%,
    #ff9a9e 100%
  );
  background-size: 200% 100%;
  animation: sunsetFlow 12s linear infinite;
}

@keyframes sunsetFlow {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

オーロラ風（上下方向も動かす）

.aurora {
  background: linear-gradient(
    120deg,
    #84fab0 0%,
    #8fd3f4 25%,
    #a18cd1 50%,
    #fbc2eb 75%,
    #84fab0 100%
  );
  background-size: 400% 400%;
  animation: aurora 15s ease infinite;
}

@keyframes aurora {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

conic-gradient を使った回転演出

conic-gradient は中心から放射状に広がるグラデーションです。回転アニメーションと組み合わせると、光が回転するような演出を作れます。

基本の回転グラデーション

.conic-spin {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ff6b6b,
    #ffa500,
    #ffef00,
    #6bff6b,
    #00b4d8,
    #a855f7,
    #ff6b6b
  );
  animation: conicSpin 4s linear infinite;
}

@keyframes conicSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

conic-gradient 自体は回転できませんが、要素ごと transform: rotate() で回転させることで回転するグラデーション効果が得られます。transform は GPU で処理されるため、パフォーマンスも良好です。

回転ボーダーグラデーション（カードの縁を光らせる）

.glow-card {
  position: relative;
  width: 300px;
  padding: 40px;
  border-radius: 12px;
  background: #1a1a2e;
  color: #fff;
  overflow: hidden; /* ::beforeをマスク */
}

.glow-card::before {
  content: '';
  position: absolute;
  inset: -2px; /* 全方向に2pxはみ出す */
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle, 0deg),
    #ff0080,
    #ff8c00,
    #40e0d0,
    #ff0080
  );
  animation: borderSpin 3s linear infinite;
  z-index: -1;
}

@keyframes borderSpin {
  to { --angle: 360deg; }
}

ただし –angle のようなカスタムプロパティを @keyframes でアニメーションするには @property の宣言が必要です（後述）。対応していないブラウザでは動作しません。対応ブラウザが限られる場合は、後述の代替手法を使ってください。

ボタンホバー時のグラデーション移動

ホバー時にグラデーションが左から右へ移動するボタンは、CTAボタンや商品購入ボタンなどでよく使われる演出です。

ホバーでグラデーションがスライドするボタン

.btn-gradient {
  display: inline-block;
  padding: 14px 36px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(
    90deg,
    #d16176 0%,
    #a855f7 50%,
    #3b82f6 100%
  );
  background-size: 200% auto;
  background-position: left center;
  transition: background-position 0.4s ease;
  text-decoration: none;
}

.btn-gradient:hover {
  background-position: right center;
}

<a class="btn-gradient" href="#">詳しく見る</a>

ホバーで輝くボタン（shine effect）

.btn-shine {
  position: relative;
  display: inline-block;
  padding: 14px 36px;
  background: linear-gradient(135deg, #d16176, #a855f7);
  color: #fff;
  border-radius: 6px;
  font-weight: bold;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}

.btn-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.btn-shine:hover::before {
  left: 150%; /* 右へ通り抜ける */
}

常時アニメーションするボタン（注目度を上げる）

.btn-pulsing {
  display: inline-block;
  padding: 14px 36px;
  color: #fff;
  border-radius: 6px;
  font-weight: bold;
  background: linear-gradient(
    90deg,
    #f72585,
    #7209b7,
    #4cc9f0,
    #f72585
  );
  background-size: 300% auto;
  animation: btnPulse 3s linear infinite;
  text-decoration: none;
}

@keyframes btnPulse {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

@property で角度をアニメーションする最新手法

CSS Houdini の @property を使うと、カスタムプロパティ（CSS変数）を型付きで宣言でき、@keyframes でアニメーションできるようになります。これにより、conic-gradient の from angle を直接アニメーションできます。

/* @property で --angle を「角度型」として宣言 */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.gradient-angle-anim {
  background: conic-gradient(
    from var(--angle),
    #ff6b6b,
    #ffa500,
    #ffef00,
    #a855f7,
    #ff6b6b
  );
  animation: rotateAngle 4s linear infinite;
}

@keyframes rotateAngle {
  to { --angle: 360deg; }
}

@property は Chrome 85+、Edge 85+、Safari 16.4+ で対応していますが、Firefox は2024年末時点でサポート外です（Firefox 128以降で実験的サポートが始まっています）。本番環境で使う際はブラウザ対応状況を必ず確認し、フォールバックを用意してください。

@property を使わないフォールバック実装

/* @property が使えない環境向け：要素を回転させる代替案 */
.gradient-angle-fallback {
  width: 100%;
  height: 100%;
  background: conic-gradient(
    from 0deg,
    #ff6b6b,
    #ffa500,
    #a855f7,
    #ff6b6b
  );
  animation: rotateFallback 4s linear infinite;
}

@keyframes rotateFallback {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

全画面背景グラデーションアニメーション

ヒーローセクションや404ページ全体を動くグラデーション背景にする実装です。

.fullscreen-gradient {
  min-height: 100vh;
  background: linear-gradient(
    -45deg,
    #ee7752,
    #e73c7e,
    #23a6d5,
    #23d5ab
  );
  background-size: 400% 400%;
  animation: fullscreenGrad 15s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

<section class="fullscreen-gradient">
  <div class="hero-content">
    <h1>動くグラデーション背景</h1>
    <p>ゆっくりと色が流れる演出</p>
  </div>
</section>

テキストに適用するグラデーションアニメーション

背景だけでなく、テキスト自体にグラデーションアニメーションを適用する方法です。CSSテキストアニメーションと組み合わせることで、さらに豊かな表現が可能になります。

.animated-gradient-text {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(
    90deg,
    #ff6b6b,
    #ffa500,
    #ffef00,
    #a855f7,
    #ff6b6b
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textGrad 5s linear infinite;
}

@keyframes textGrad {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

グラデーションアニメーションの実装方法比較

手法	ブラウザ対応	パフォーマンス	柔軟性	適した用途
background-position移動	全対応	中（CPUで描画）	高	背景・ボタン・汎用
transform: rotate() + conic	全対応	高（GPU）	中	ローダー・ボーダー演出
@property + conic-gradient	Chrome/Safari（Firefoxは限定的）	中〜高	高	先進的な演出
filter: hue-rotate()	全対応	中	低	単純な色回転

filter: hue-rotate() で色を回転させる手法

filter: hue-rotate() を使うと、グラデーションの色相全体を回転させることができます。シンプルなコードで虹色の変化を作れます。

.hue-rotate-bg {
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  animation: hueRotate 8s linear infinite;
}

@keyframes hueRotate {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

ただし filter は要素全体に適用されるため、テキストや子要素の色も変化してしまう点に注意が必要です。背景専用の要素（::before 疑似要素など）に適用するのが安全です。

/* 疑似要素に適用して子要素への影響を防ぐ */
.hue-rotate-section {
  position: relative;
  overflow: hidden;
  color: #fff; /* テキストは白固定 */
}

.hue-rotate-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  animation: hueRotate 8s linear infinite;
  z-index: -1;
}

パフォーマンス最適化（GPU対応とCPU負荷対策）

グラデーションアニメーションはCPUの描画負荷が高くなりやすいため、パフォーマンスに配慮した実装が必要です。

background-position vs transform の使い分け

background-position のアニメーションはCPU（レイアウト再計算）で処理されます。一方、transform と opacity はGPUの合成レイヤーで処理されるため、より効率的です。

ただし、background-position のアニメーション程度なら現代のデバイスでは問題が起きにくいです。複数の要素に同時に適用したり、filter と組み合わせたりするとCPU負荷が上がるため注意してください。

will-change の適切な使い方

/* アニメーションが重い場合のみ使う */
.heavy-gradient {
  will-change: background-position;
  background: linear-gradient(90deg, #ff6b6b, #a855f7, #3b82f6, #ff6b6b);
  background-size: 300% 100%;
  animation: grad 6s linear infinite;
}

@keyframes grad {
  to { background-position: 300% center; }
}

/* アニメーション終了後はwill-changeを解除する（JS） */
/* element.style.willChange = 'auto'; */

will-change は「この要素は近い将来変化する」とブラウザに伝え、事前に合成レイヤーを確保します。しかし乱用するとメモリ消費が増加するため、実際に重いと感じた要素にのみ使用してください。

prefers-reduced-motion への対応

/* 通常のアニメーション設定 */
.gradient-animated {
  background: linear-gradient(90deg, #d16176, #a855f7, #3b82f6);
  background-size: 200% auto;
  animation: gradMove 6s linear infinite;
}

@keyframes gradMove {
  to { background-position: 200% center; }
}

/* モーション低減設定の場合はアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  .gradient-animated {
    animation: none;
    background-size: 100% auto;
    background-position: 0% center;
  }
}

メッシュグラデーション風アニメーション

複数の radial-gradient を重ねて、点や玉状の光源がゆっくり動くような演出を作れます。いわゆる「メッシュグラデーション」に近い見た目です。

.mesh-gradient {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255, 107, 107, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(168, 85, 247, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(59, 130, 246, 0.5) 0%, transparent 50%),
    #1a1a2e;
  background-size:
    200% 200%,
    200% 200%,
    200% 200%,
    100% 100%;
  animation: meshMove 12s ease infinite;
}

@keyframes meshMove {
  0% {
    background-position:
      0% 50%,
      100% 0%,
      50% 100%,
      0% 0%;
  }
  33% {
    background-position:
      100% 50%,
      0% 100%,
      100% 0%,
      0% 0%;
  }
  66% {
    background-position:
      50% 0%,
      50% 50%,
      0% 50%,
      0% 0%;
  }
  100% {
    background-position:
      0% 50%,
      100% 0%,
      50% 100%,
      0% 0%;
  }
}

よくある失敗と対処法

失敗1：グラデーションが動いているように見えない

background-size を大きくしないと、background-position を変えても見た目が変わりません。background-size: 200% 以上を指定しているか確認してください。

/* NG：background-size が100%のままだと動かない */
.not-moving {
  background: linear-gradient(90deg, red, blue);
  background-size: 100% 100%; /* これだと動かない */
  animation: grad 3s linear infinite;
}

/* OK：200%以上に設定する */
.moving {
  background: linear-gradient(90deg, red, purple, blue, red);
  background-size: 300% 100%; /* 3倍にする */
  animation: grad 3s linear infinite;
}

@keyframes grad {
  to { background-position: 100% center; }
}

失敗2：ループの切れ目が目立つ

ループ再生したとき、最初と最後の色が異なると「カクッ」と切り替わりが目立ちます。グラデーションの最後の色を最初の色と同じにすることで解消します。

/* NG：最初と最後の色が違う */
.seam-visible {
  background: linear-gradient(90deg, #ff6b6b, #a855f7, #3b82f6);
}

/* OK：最後に最初の色を繰り返す */
.seamless {
  background: linear-gradient(90deg, #ff6b6b, #a855f7, #3b82f6, #ff6b6b);
}

失敗3：@property が動作しないブラウザへの対応

/* @supportsで分岐する */
/* フォールバック：background-positionを使う安全な実装 */
.safe-gradient {
  background: conic-gradient(from 0deg, #ff6b6b, #a855f7, #ff6b6b);
  animation: rotateFallback 4s linear infinite;
}

@keyframes rotateFallback {
  to { transform: rotate(360deg); }
}

/* @propertyが使えるブラウザではより良い実装を */
@supports (background: conic-gradient(from var(--angle, 0deg), red, blue)) {
  @property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  .safe-gradient {
    background: conic-gradient(from var(--angle), #ff6b6b, #a855f7, #ff6b6b);
    animation: rotateProp 4s linear infinite;
  }

  @keyframes rotateProp {
    to { --angle: 360deg; }
  }
}

@keyframesの基本的な使い方を押さえていれば、@supports との組み合わせも難しくありません。ブラウザごとに実装を切り替える場合は @supports で条件分岐するのが定石です。

まとめ

背景グラデーションアニメーションは、background-sizeを200%以上に広げてbackground-positionを動かすのが基本形です。ポイントは①linear・radial・conicを使い分ける②アニメーションは長め（8〜15秒）でゆったり見せる③ボタンや文字（background-clip: text）にも応用できる、の3点。多用は重くなるので、主役の一箇所に絞って使いましょう。

よくある質問（FAQ）

CSSグラデーションアニメーションはパフォーマンスに影響しますか？

background-position を動かす手法はCPUで描画処理されるため、GPUで処理される transform や opacity より若干負荷が高くなります。ただし単純なグラデーション1〜2個程度であれば現代のデバイスで問題になることはほぼありません。全画面背景に適用しつつ他のアニメーションも多用している場合は、Chrome DevTools の Performance タブで確認してください。高負荷な場合は will-change: background-position を追加するか、アニメーション速度を遅くして変化の頻度を下げることで改善できます。

グラデーションの色を途中で変更（JavaScript から制御）できますか？

CSS カスタムプロパティ（変数）を経由すれば可能です。@property で色の変数を定義し、JavaScript から element.style.setProperty(‘–color1’, ‘#新しい色’) のように変更できます。ただしグラデーションの色のトランジション（色Aから色Bへの補間）はCSSだけでは難しいため、色変化をアニメーションしたい場合はJavaScriptのSetIntervalやWeb Animations APIを使う方法が確実です。

background-clip: text と組み合わせて文字にグラデーションアニメーションを適用できますか？

はい、可能です。-webkit-background-clip: text と -webkit-text-fill-color: transparent を設定した要素に background-position アニメーションを追加することで、文字の中でグラデーションが動く演出が作れます。ただし background-clip: text は paint worklet で処理されるため、ブラウザによってはパフォーマンスが落ちる場合があります。長いテキストや複数要素への同時適用は注意して確認してください。

IE11 でも動作させる必要があります。どうすればいいですか？

IE11 は @keyframes によるアニメーション自体は対応していますが、conic-gradient や @property には対応していません。また CSS カスタムプロパティも IE11 では動作しません。IE11 対応が必要な場合は、background-positionアニメーションの手法のみに限定し、ベンダープレフィックス（-webkit-）を付ける方針が現実的です。ただし現在のシェアを考えると、IE11 対応を省略してモダンブラウザのみ対応とする判断も合理的です。

グラデーションアニメーションが特定のブラウザでちらつきます

SafariでCSSアニメーションがちらつく場合、-webkit-transform: translateZ(0) や backface-visibility: hidden を追加するとGPUレイヤーに昇格して改善されることがあります。また、background-size に大きな値（400%以上）を使っている場合は 200〜300% 程度に下げてみてください。Chromeでちらつく場合はwill-change: background-positionを追加するか、Chromeのレンダリング設定（chrome://flags）でハードウェアアクセラレーションを確認してみてください。

あわせて読みたい関連記事

CSS・Webデザイン実装の総まとめ

CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。

【CSS実装テクニック完全マップ】コピペで使えるWebデザイン実装ガイド総まとめ

AIスキルで、未来の自分をアップデート！

今なら完全無料でAIを学べる！

動画や実践で楽しく学べる：初心者でも安心のカリキュラム
スマホ・PCどちらでもOK：好きな時間に学習できる
料金は一切ナシ：0円でAIスキルが身につく

目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。

会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！

公式LINEから学習をスタート

この記事を書いた人

田中誠

WithCodeでWeb制作を習得後、フリーランスエンジニアとして活動。HTML/CSS・JavaScript・WordPress案件を中心に年間20件以上の制作実績を持つ。「難しい技術をわかりやすく」をモットーに、初心者〜中級者向けの技術記事を執筆。副業・フリーランス独立を目指す方に向けた情報発信に注力している。