CSSで作るおしゃれな背景グラデーション4パターン

ウェブデザインで背景にグラデーションを使うと、画面全体のおしゃれ度がぐっとアップします。
この記事では、初心者でもすぐに使えるコピペ可能な背景グラデーションのCSSコードを4パターン紹介します。

CSSグラデーションの基本
1. 説明
野球場っぽいグラデーション
1. 説明
赤ベースの高級感ある背景
1. 説明
ポップなグラデーション背景
1. 説明
まとめ
グラデーションをもっと見たい方におすすめ

CSSグラデーションの基本

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS グラデーションの基本</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    /* 上が青、下が白の縦グラデーション */
    background: linear-gradient(to bottom, #2196f3, #ffffff);
  }
</style>
</head>
<body>
</body>
</html>

説明

background: linear-gradient(to bottom, #2196f3, #ffffff);

linear-gradient：線形グラデーションを作る関数。
to bottom：上から下へ向かって色を変化させる。
#2196f3：開始色（上側の青）。
#ffffff：終了色（下側の白）。

方向を変えたい場合は以下のように書き換えます。

横方向 → to right
斜め右下 → to bottom right
逆方向（下から上） → to top

例：

background: linear-gradient(to right, #2196f3, #ffffff);

margin: 0;
height: 100vh;

margin: 0;

ブラウザのデフォルトでは、body には上下左右に少し余白（margin）が設定されています。
margin: 0; はその余白をなくして、画面いっぱいに要素を広げるための指定です。

height: 100vh;

画面（ビューポート）の高さを 100% 使う、という意味です。
vh は「viewport height（ビューポート高さ）」の略で、
100vh = 画面の高さちょうど。
これを指定することで、背景グラデーションが画面全体に広がります。

野球場っぽいグラデーション

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>野球場っぽい背景</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(
      to bottom,
      #87ceeb 0%,     /* 空の青 */
      #bde3ff 30%,    /* 地平線あたりの薄い青 */
      #4caf50 60%,    /* 芝生の緑 */
      #388e3c 100%    /* 深い緑で締める */
    );
  }
</style>
</head>
<body>
</body>
</html>

説明

このコードは、上から下へ色を4段階で変化させて「空から芝生へ」移り変わるような背景を作っています。

background: linear-gradient(
  to bottom,
  #87ceeb 0%,     /* 空の青 */
  #bde3ff 30%,    /* 地平線あたりの薄い青 */
  #4caf50 60%,    /* 芝生の緑 */
  #388e3c 100%    /* 深い緑で締める */
);

linear-gradient(to bottom, ...)
→ 上から下方向へグラデーションをかける。
#87ceeb 0%
→ 画面の一番上（0%）を空色に。
#bde3ff 30%
→ 30%の高さで薄い青に変化し、地平線のような雰囲気を出す。
#4caf50 60%
→ 60%の高さで芝生の緑に切り替える。
#388e3c 100%
→ 一番下を濃い緑にして、地面を締めるイメージに。

複数の色を段階的に指定することで、2色よりも自然なグラデーションになります。
スポーツグラウンドなどの背景表現に向いています。

こちらのコードはChatGPTに出してもらいました。

野球場っぽい背景グラデーションを作って
芝生と空のイメージで

このようにお願いしたらサクッと作ってくれます。
気に入らないならすぐに修正してもらえるので助かります。
同じお願いをしても常に同じコードが出るわけではありません。

このコードを使って野球クイズを作りました👇

【プロ野球クイズ】阪神タイガース2025年開幕戦のスタメンは？

阪神タイガースの2025年開幕戦スタメンを当てるクイズです。阪神ファンなら覚えておきたいメンバーを題材にしました。4択形式なので、気軽にチャレンジしてください。

【広告】

赤ベースの高級感ある背景

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>赤ベースの高級感ある背景</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(
      to bottom,
      #4b0000 0%,     /* 深いワインレッド */
      #8b0000 35%,    /* 濃い赤 */
      #b22222 70%,    /* 鮮やかな深紅 */
      #200000 100%    /* 下部を引き締める暗赤 */
    );
  }
</style>
</head>
<body>
</body>
</html>

説明

#4b0000 と #200000 で上下を暗くすることで奥行きが出ます。
中央の #b22222 が映えるため、赤系でも落ち着いた高級感を感じる配色です。
グラデーションの割合（%）を調整すれば、明るい部分の比率を増減できます。

こちらもChatGPTに出してもらいました。

赤をベースにした高級感のある背景グラデーションを作って

これだけのお願いをしたら、きれいなグラデーションができました。
配色センスに自信がない方はChatGPTを使ってみましょう。

ポップなグラデーション背景

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ポップなグラデーション背景</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(
      135deg,
      #ff7eb9 0%,  #ff7eb9 20%,   /* ピンク */
      #ff65a3 20%, #ff65a3 40%,   /* ビビッドピンク */
      #7afcff 40%, #7afcff 60%,   /* 明るい水色 */
      #feff9c 60%, #feff9c 80%,   /* ポップな黄色 */
      #fff740 80%, #fff740 100%   /* 明るいレモン色 */
    );
  }
</style>
</head>
<body>
</body>
</html>