【コピペOK】CSSのみでグラデーション背景をアニメーションさせる方法

こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。

今回はCSSでグラデーション背景をゆらゆら動かすアニメーションを作る方法を紹介します。シンプルな背景に動きを加えることで、サイトの印象をアップできます。

ではいく〜

背景をアニメーションで動かすには

グラデーションの背景をアニメーションさせることで、ふんわりと色が流れるような効果を作ります。CSSのlinear-gradientとbackground-positionを組み合わせることで、簡単に実現可能です。

そのほかのおすすめの背景はこちら！ノイズ テクスチャ を加えた背景 👇

mellowlife

【コピペOK】サイト背景にざらざら質感を追加しておしゃれな背景に【cssのノイズテクスチャ】 | mellowlife こんにちはrey( @reydesign8376) です都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。 最近、ノイズエフェク…

CSS

全背景にするのでbodyにスタイルを当てていきます

body {
    width: 100%;
    height: 100vh;
    background: linear-gradient(45deg, #ffffe0, #b0e0e6, #ffffe0, #f0ffff);
    background-size: 200% 200%;
    animation: gradientMove 5s ease infinite;
}

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

CSSを解説！

1. グラデーションの設定

background: linear-gradient(45deg, #ffffe0, #b0e0e6, #ffffe0, #f0ffff);

4色のグラデーションを45度の角度で設定。落ち着いた色合いが柔らかい印象を与えます。

2. 背景サイズの調整

background-size: 200% 200%;

通常の100%ではなく200%にすることで、アニメーションの動きをなめらかにします。

3. アニメーションの設定

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

背景の位置を変化させることで、ゆらゆらと色が流れるような動きを作ります。

4. アニメーションの適用

animation: gradientMove 5s ease infinite;

• 5s → 変化のスピード（5秒で1ループ）
• ease → 緩やかな変化
• infinite → 無限に繰り返す

@keyframes を詳しく知りたい方はこちらも参考に！👇

mellowlife

@keyframesとは？CSSアニメーションの基礎と活用方法 | mellowlife 今回はCSSアニメーションの基本となる@keyframesについて解説します。アニメーションを活用すると、Webサイトのデザインがより動きのある魅力的なものになります。 @keyfra…

色を変える

linear-gradientのカラーパターンを変えることで、雰囲気の異なるアニメーションを作れます。

例えば、夕焼け風のグラデーションにしたい場合は以下のように変更します。

background: linear-gradient(45deg, #7266ff, #feb47b, #ff7e5f, #a7cfff);

これで、夕方から夜の間の色味のグラデーション背景が実現できます☺️

まとめ

グラデーション背景に動きをつけるだけで、サイトのデザインがぐっとおしゃれになります。コードもシンプルなので、ぜひ試してみてください！

今後もCSSテクニックを紹介していくので、お楽しみに！

では〜👋