CSSだけで作れる！グラデーションが“光の反射”のように流れる背景アニメーション

10月 28, 2025 10月 28, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、CSSだけで“光が反射して流れているように見えるグラデーション背景”を作るテクニックをご紹介します。

光の反射や動きのある背景は、サイト全体に高級感や未来的な印象を与えてくれます。
しかも今回紹介する方法は、JavaScript不要・CSSのみで実装できるのがポイントです。

ランディングページのヒーローエリアや、ボタン・ヘッダーの背景などに使うと、
サイトの第一印象が一気に洗練されるのでおすすめです。

CSSだけで光が流れるグラデーションを作る方法

まずは基本構造を見てみましょう。
HTMLはとてもシンプルです。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

 <div class="shine-bg"> <h2>Shiny Gradient Background</h2> </div>

次に、この.shine-bgにCSSアニメーションを適用していきます。

流れるグラデーションの基本CSS

光の反射のような動きを出すために、
linear-gradientをアニメーションさせて、背景の位置を変化させます。

  .shine-bg {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    background: linear-gradient(120deg, #00c3ff, #ffff1c, #00c3ff);
    background-size: 200% 200%;
    animation: shine 4s ease-in-out infinite;
    border-radius: 16px;
  }
  @keyframes shine {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

このコードでは、background-size: 200% 200%;で背景を広めに設定し、
background-positionを左右に動かすことで、光が滑らかに流れて見えるようにしています。

linear-gradient(120deg, #00c3ff, #ffff1c, #00c3ff) の角度を調整すれば、
光の流れる方向も自由に変えられます。

柔らかい光の反射にするアレンジ

先ほどの演出は「光沢」感が強めでしたが、
もう少し自然な反射や柔らかいグロー効果を出すアレンジもできます。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

このスタイルは、光が表面を横切るような自然な動きを演出できます。
背景が暗い場合は特に映えます。
ボタンやロゴの背面に置いてもおしゃれです。

光の流れるグラデーション背景の応用例

この演出は、以下のようなデザインに活用できます。

ヒーローヘッダー背景（高級感・近未来感）
ボタンホバー時の光沢演出
ローディング画面のアニメーション背景
サービスページの見出しセクション背景

さらに、CSS変数を使えば複数パターンを簡単に切り替えできます。

 :root {
    --grad: linear-gradient(120deg, #ff00cc, #3333ff, #ff00cc);
  }
  .shine-bg {
    background: var(--grad);
    background-size: 200% 200%;
    animation: shine 5s ease-in-out infinite;
  }

これにより、テーマカラーを変えるだけで統一感のある光エフェクトが作れます。