背景をゆっくり動かすグラデーションをCSSで作る｜コピペで使える4種類と、速さの目安・止める方法

ページを開いたとき、見出しの後ろの色がゆっくり移り変わっている。写真や動画を置かなくても、ページに「動いている空気」を足せる方法です。この背景の動きは、CSSのグラデーションとアニメーションだけで作れます。

使いどころ

ページのいちばん上など、1か所の背景にだけ使う。文章をじっくり読ませる場所の背景には使わない。速さは、見ていて「動いている」と気づくかどうかくらいにする。

今回は、色がゆっくり流れるグラデーション、向きがくるりと回るグラデーション、光のぼかしがただよう背景、しま模様がすこしずつ流れる背景の4種類を、コピペ用のコードつきで紹介します。あわせて、速さの目安や、上にのせる文字の読みやすさ、見る人が動きを止められるようにする方法もまとめました。

連載「WEBの技術」の22回目です。
今回は「背景をゆっくり動かす」。主役の文字の邪魔をしない動かし方を見ていきます。

完成見本：ページを開いたときから、自動で動く

下の見本は、ページを開いたときから自動で動いています。色が横へゆっくり流れていく形です。動きはわざと遅くしているので、数秒ながめると色の変化が分かります。

FLOW1. 色がゆっくり流れるグラデーションページのいちばん上（最初に見える場所）の背景

※ 見本は見た目を見せるためのもので、読み上げソフトでは読まれないようにしています。端末の「動きを減らす」設定がオンのときは、動きが止まって見えます。

コピペ用のコード

まず、4種類に共通の「文字をのせる箱」のCSSを入れます。そのうえで、使いたい背景のクラス（kd-gbg-flow など）を箱に足します。CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-gbg は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

共通のCSS（文字をのせる箱）

/* 4種類に共通：文字をのせる箱 */
.kd-gbg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 40px 24px;
  border-radius: 16px;
  color: #FFFFFF;
  text-align: center;
  /* 箱からはみ出した背景を見せない */
  overflow: hidden;
}
.kd-gbg-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
.kd-gbg-text {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.7;
}

共通のCSS（動きを減らす設定の人には止める）

/* 「動きを減らす」設定の人には、動きを止める */
@media (prefers-reduced-motion: reduce) {
  .kd-gbg-flow,
  .kd-gbg-turn,
  .kd-gbg-float::before,
  .kd-gbg-float::after,
  .kd-gbg-stripe {
    animation: none;
  }
}

「動きを減らす」設定のCSSは、4種類のどれを使うときも一緒に入れてください。理由は、後半の「見る人への配慮」で説明します。

1. 色がゆっくり流れるグラデーション

青から紺、紫へと、色がゆっくり横へ流れていく形です。グラデーションを箱の3倍の大きさで作っておき（background-size: 300%）、見えている位置（background-position）を左端から右端へ動かします。窓の外を、大きな色の帯がゆっくり通り過ぎていくような仕組みです。

HTML

<div class="kd-gbg kd-gbg-flow">
  <p class="kd-gbg-title">ホームページ制作のご相談</p>
  <p class="kd-gbg-text">まずはお気軽にお問い合わせください</p>
</div>

CSS

.kd-gbg-flow {
  background: linear-gradient(120deg, #0369A1, #1E40AF, #6D28D9, #0369A1);
  /* グラデーションを、箱の3倍の大きさにする */
  background-size: 300% 300%;
  animation: kd-gbg-flow 12s ease-in-out infinite alternate;
}
@keyframes kd-gbg-flow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

2. 向きがくるりと回るグラデーション

グラデーションの向き（角度）が、ゆっくり1周する形です。色の帯が箱の中を回るので、光の当たる向きが変わっていくように見えます。角度は、ふつうはアニメーションでなめらかに変えられません。@property（自分で作った変数に「これは角度です」と型を教える指定）を使うと、ブラウザが途中の角度を計算できるようになり、なめらかに回ります。

HTML

<div class="kd-gbg kd-gbg-turn">
  <p class="kd-gbg-title">新しいサービスのお知らせ</p>
  <p class="kd-gbg-text">くわしくは、このあとご紹介します</p>
</div>

CSS

@property --kd-gbg-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.kd-gbg-turn {
  background: linear-gradient(var(--kd-gbg-angle), #0F766E, #0369A1, #1E40AF);
  animation: kd-gbg-turn 16s linear infinite;
}
@keyframes kd-gbg-turn {
  to { --kd-gbg-angle: 360deg; }
}

3. 光のぼかしがただよう背景

紺色の背景の上で、ぼかした青と紫の光が、ゆっくり漂う形です。::before と ::after（箱の中に飾りの部品を2つ足す指定）で丸を作り、filter: blur()（ぼかす指定）でふちを溶かします。動かしているのは、丸の位置と大きさ（transform）だけです。

HTML

<div class="kd-gbg kd-gbg-float">
  <p class="kd-gbg-title">ていねいに、伝わる形に</p>
  <p class="kd-gbg-text">デザインと制作を、まとめてお手伝いします</p>
</div>

CSS

.kd-gbg-float {
  background: #10283A;
  /* 飾りの丸を、文字の後ろ・箱の中に収める */
  isolation: isolate;
}
.kd-gbg-float::before,
.kd-gbg-float::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
}
.kd-gbg-float::before {
  top: -20%;
  left: -10%;
  background: #0EA5E9;
  animation: kd-gbg-float-a 14s ease-in-out infinite alternate;
}
.kd-gbg-float::after {
  bottom: -25%;
  right: -10%;
  background: #8B5CF6;
  animation: kd-gbg-float-b 14s ease-in-out infinite alternate;
}
@keyframes kd-gbg-float-a {
  to { transform: translate(40%, 30%) scale(1.2); }
}
@keyframes kd-gbg-float-b {
  to { transform: translate(-40%, -30%) scale(1.2); }
}

4. しま模様がすこしずつ流れる

斜めのしま模様が、横へすこしずつ流れていく形です。repeating-linear-gradient（同じ色の並びをくり返すグラデーション）で、40pxの四角の中にしまを2本描きます。その四角を敷きつめて、位置をちょうど40pxずらすと、つなぎ目が見えないまま、ずっと流れ続けます。

HTML

<div class="kd-gbg kd-gbg-stripe">
  <p class="kd-gbg-title">期間限定キャンペーン</p>
  <p class="kd-gbg-text">10月31日まで、ご相談は無料です</p>
</div>

CSS

.kd-gbg-stripe {
  background-color: #0369A1;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, .10) 0 25%,
    rgba(255, 255, 255, 0) 0 50%
  );
  /* 40pxの四角を、敷きつめる */
  background-size: 40px 40px;
  animation: kd-gbg-stripe 4s linear infinite;
}
@keyframes kd-gbg-stripe {
  to { background-position: 40px 0; }
}

仕組み：動かしているのは「背景の位置」と「角度」

1. 大きなグラデーションの、見える位置をずらす

グラデーションの色そのものは、アニメーションで少しずつ変えることができません。そこで1の見本では、色を変えるかわりに「見えている場所」を動かしています。

background-size: 300% 300% で、グラデーションを箱の3倍の大きさに引きのばします。箱には、その一部だけが見えています。background-position を 0%（左端）から 100%（右端）へ動かすと、大きなグラデーションが箱の中を横切るので、色が流れて見えます。

色の並びを「青 → 紺 → 紫 → 青」と、最初と最後を同じ色にしているのもポイントです。alternate（行きと帰りを交互にくり返す指定）で右端から左端へ戻るとき、つなぎ目で色が急に変わりません。

2. 角度を「型つきの変数」にして回す

2の見本は、グラデーションの角度を、--kd-gbg-angle という自分で作った変数（カスタムプロパティ）で指定しています。ふつうの変数は、ブラウザにとってただの文字なので、0degと360degのあいだの角度を計算できません。

@property で「この変数は角度（<angle>）です」と型を決めておくと、ブラウザが途中の角度を計算して、なめらかに回せるようになります。MDNによると、@property は2024年7月から主要ブラウザの最新版で使える段階（Baseline 2024）です。それより古いブラウザでは、角度がなめらかに回りません。

3. 背景ではなく、ぼかした丸を動かす

3の見本は、背景そのものは紺色1色です。その上に ::before と ::after で青と紫の丸を置き、filter: blur(40px) でふちをぼかして、光のように見せています。丸には z-index: -1 を付けて文字の後ろへ回し、箱に isolation: isolate（重なりの順番を、この箱の中だけで完結させる指定）を付けて、丸が箱の外の背景より後ろへ行かないようにしています。

4. しまの四角を、ちょうど1枚分ずらす

4の見本は、40pxの四角の中に斜めのしまを描き、それを箱いっぱいに敷きつめています。background-position を40pxずらすと、となりの四角とぴったり同じ見え方に戻ります。そこから最初に戻ってくり返すので、つなぎ目が分からないまま、ずっと流れ続けます。

動かすものによって、ブラウザの手間がちがう

MDNの解説では、色や背景のように「描き直し（ペイント）」が必要な指定と、transform や opacity のように描き直しを省ける指定があるとされています。1・2・4は背景を描き直しながら動かす形、3は丸の位置と大きさを transform で動かす形です。どれも、大きな画面いっぱいに何か所も置くと、そのぶんブラウザの手間が増えます。背景の動きを1ページに1か所にしたいのは、見た目の理由だけではありません。

数値を変えるとどうなるか

流れる速さ（1の見本の 12s）

同じグラデーションで、片道にかける時間だけを変えて並べました。

3秒：落ち着かない

12秒：目安の速さ

30秒：止まって見える

3秒だと、色の動きが目に入りつづけて、上にのせた文字より背景に目が行きます。30秒だと、ほとんど止まって見えます。KAKERUでは、10〜15秒くらいを目安にしています。背景は主役ではないので、「言われてみれば動いている」くらいがちょうどいいと考えています。

変えるところ	小さくすると	大きくすると
片道の時間（1の 12s）	色の動きが目立ち、落ち着かない	ゆっくりになり、止まっているように見える
グラデーションの大きさ（1の 300%）	色の変化が少なく、ほぼ1色に見える	1度に見える色の差が小さくなり、変化がおだやかになる
ぼかしの強さ（3の 40px）	丸のふちが見え、「丸が動いている」と分かる	光がうすく広がり、背景になじむ
しまの四角（4の 40px）	しまが細かくなり、ちらついて見える	しまが太くなり、模様が主張する

スマホと、見る人への配慮

動きが苦手な人には、止める

画面の大きな面積がゆっくり動いていると、気分が悪くなったり、文章に集中できなくなったりする人がいます。iPhoneの「視差効果を減らす」など、端末の「動きを減らす」設定がオンのときは、prefers-reduced-motion で受け取って、アニメーションを止めます。止めても、グラデーションの色はそのまま残るので、デザインがくずれることはありません。

ずっと動く背景には、止める方法を用意する

W3Cのアクセシビリティの基準（WCAG 2.2）では、自動で始まり、5秒より長く続き、ほかの内容と一緒に出ている動きには、止める・隠す方法を用意することとされています。ずっと動き続ける背景は、この条件に当てはまります。このあとの「KAKERUならこう使う」で、見る人が自分で止められるボタンのコードを紹介します。

文字の読みやすさは、いちばん明るい瞬間で確かめる

背景が動くと、文字の後ろの色も変わります。白い文字が読めるかどうかは、背景がいちばん明るくなる瞬間の色で確かめます。今回の見本は、どの瞬間でも、白い文字との明るさの差（コントラスト）が4.5対1以上になる色だけを使っています。たとえば1の青（#0369A1）は約5.9対1です。KAKERUブルー（#0EA5E9）をそのまま背景に使うと、白い文字との差が足りなくなるので、3の見本のように、紺色の上にうすく重ねる使い方にしています。

スマホでは、箱を少し低く

スマホでは画面が小さいぶん、動く背景が画面の大部分をしめます。見本の台では、スマホのときだけ箱の高さと文字を少し小さくしています。自分のサイトで使うときも、スマホの画面で「背景ばかりが目に入らないか」を一度確かめてください。

やりすぎ注意

動く背景は、ページの空気を作るためのものです。見出しのたびに動く背景を置いたり、ボタンやカードの背景まで動かしたりすると、どこを読めばいいのかが分からなくなります。動かすのは1ページに1か所、いちばん上の見出しまわりに限るのが、KAKERUの考え方です。

背景の動きは、気づかれなくても困らない「空気」の役です。
目立たせたいものがあるなら、背景ではなく、そのもの自体で目立たせるほうが伝わると考えています。

AIに頼むなら

動く背景は、Claudeなどの生成AIに頼んでもすぐ作ってもらえます。そのときは「色」「速さ」「上にのせる文字」「動きを減らす設定」「止める方法」まで、まとめて伝えると手直しが少なく済みます。

ページ上部の見出しの背景に、青から紫へゆっくり流れるグラデーションをCSSで作って。
片道12秒で行き来させ、prefers-reduced-motion のときは止める。
白い文字とのコントラストが、どの色でも4.5:1以上になる濃い色だけを使って。止めるボタンも付けて。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

速すぎないか。アニメーションの時間が数秒になっていたら、背景としては速すぎます。10秒以上にのばして、見え方を比べます
いちばん明るい瞬間も、文字が読めるか。グラデーションの中に明るい色（水色や黄色など）が入っていると、その瞬間だけ白い文字が読みにくくなります。色の並びを1つずつ見ます
「動きを減らす」設定で止まるか。止めるボタンは、キーボードでも押せるか。iPhoneなら「視差効果を減らす」をオンにして、ページを開き直して確かめます。ボタンは Tab キーで選べて、Enter で押せるかを見ます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

写真や動画を置かない、ページのいちばん上。文字だけの見出しでも、背景がゆっくり動くと、ページを開いた瞬間の印象がやわらぎます。1の「流れる」か3の「ただよう」を使います
季節やキャンペーンのお知らせ。期間が決まっているページで、ふだんのページと空気を変えたいときに、2の「回る」や4の「しま模様」を使います
見る人が止められる形にできるとき。ずっと動かすなら、下のような「背景の動きを止める」ボタンを箱の中に置きます

ボタンを押すと、animation-play-state: paused（アニメーションをその場で止める指定）が当たり、背景がそこで止まります。もう一度押すと、続きから動きます。aria-pressed は、読み上げソフトに「押されている・押されていない」を伝えるための指定です。下の見本は、実際に押して試せます。

ホームページ制作のご相談

まずはお気軽にお問い合わせください

応用：HTML（箱の中にボタンを足す）

<div class="kd-gbg kd-gbg-flow">
  <p class="kd-gbg-title">ホームページ制作のご相談</p>
  <p class="kd-gbg-text">まずはお気軽にお問い合わせください</p>
  <button type="button" class="kd-gbg-pause" aria-pressed="false">背景の動きを止める</button>
</div>

応用：CSS

/* 応用：「背景の動きを止める」ボタン */
.kd-gbg.is-paused,
.kd-gbg.is-paused::before,
.kd-gbg.is-paused::after {
  animation-play-state: paused;
}
.kd-gbg-pause {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(16, 40, 58, .55);
  font-size: 12px;
  cursor: pointer;
}
.kd-gbg-pause[aria-pressed="true"] {
  color: #10283A;
  background: #FFFFFF;
}
.kd-gbg-pause:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
}

応用：JavaScript（ページの最後に入れる）

document.querySelectorAll('.kd-gbg-pause').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var paused = btn.closest('.kd-gbg').classList.toggle('is-paused');
    btn.setAttribute('aria-pressed', paused ? 'true' : 'false');
  });
});

使わない場面

長い文章を読ませるページの背景。読んでいるあいだ、目の端でずっと色が変わると、文章に集中できなくなります。本文の後ろは、動かない白や淡い色にします
1ページに何か所も。見出しごとに動く背景を置くと、ページ全体がにぎやかになるだけで、どこが大事かが伝わりません
文字を読ませたい「料金」や「お知らせの本文」の後ろ。4の「しま模様」は特に、細かい文字の後ろに置くとちらついて読みにくくなります。しま模様の上には、短い見出しだけをのせます

動く背景を入れる前に、「止まっていても、このページは成り立つか」を確かめます。
止まった状態で読みやすく、きれいに見えるなら、動きは足してもいい、という順番です。

まとめ

背景をゆっくり動かす表現は、CSSのグラデーションとアニメーションだけで作れる
流れる形は、大きなグラデーションの background-position をずらす。回る形は、@property で角度を「型つきの変数」にする
ただよう光は、ぼかした丸を transform で動かす。しま模様は、四角1枚分ずらしてくり返す
速さは10〜15秒くらいが目安。背景は「言われてみれば動いている」くらいでいい
prefers-reduced-motion で止める。ずっと動かすなら、見る人が止められるボタンを置く
文字の読みやすさは、背景がいちばん明るい瞬間で確かめる。動かすのは1ページに1か所

まずは1の「色がゆっくり流れるグラデーション」のコードをコピーして、ページのいちばん上の見出しで試してみてください。そのあと端末の「動きを減らす」設定をオンにして、ページを開き直すと、止まったときの見え方も確かめられます。

参考にした資料

いずれも2026年10月25日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

MDN「linear-gradient()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient
※角度と色を並べて、直線のグラデーションを作れること
MDN「repeating-linear-gradient()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/repeating-linear-gradient
※色の並びをくり返して、しま模様を作れること
MDN「background-size」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-size
※背景の画像やグラデーションの大きさを決められること
MDN「background-position」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-position
※背景の見えている位置を、％やpxで決められること
MDN「@property」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@property
※自分で作った変数に型と初期値を決められること。2024年7月から主要ブラウザの最新版で使える（Baseline 2024）こと
MDN「filter: blur()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/filter-function/blur
※要素をぼかせること
MDN「animation-play-state」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-play-state
※paused で、アニメーションをその場で止められること
MDN「prefers-reduced-motion」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
※端末の「動きを減らす」設定を、CSSで受け取る方法
MDN「Animation performance and frame rate」（英語）
https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Animation_performance_and_frame_rate
※色などを変えると描き直し（ペイント）が起き、transform と opacity は描き直しを省けること
MDN「aria-pressed」（英語）
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-pressed
※押した・押していないの2つの状態を持つボタンを、読み上げソフトに伝える方法
Apple サポート「iPhone、iPad、iPod touch で画面の視差効果を減らす」
https://support.apple.com/ja-jp/111781
※iPhoneの「視差効果を減らす」の場所
W3C「Understanding SC 2.2.2 Pause, Stop, Hide」（英語）
https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html
※自動で始まり、5秒より長く続き、ほかの内容と一緒に出ている動きには、止める・隠す方法を用意すること