グラデーション背景の作り方

このページの目的

CSSのlinear-gradient()関数を使い、Webサイトの背景に美しいグラデーションを適用する方法を学びます。
色の指定方法や角度の調整、複数の色を組み合わせるテクニックをマスターし、デザインの表現力を高めることが目標です。

---

smart_display動作サンプル

実際に動作するサンプルです。様々なパターンのグラデーションを確認してみてください。

このサンプルを実装するためのHTMLとCSSのコードは以下の通りです。

---

build実装方法

backgroundまたはbackground-imageプロパティに、linear-gradient()関数を指定することで、線形のグラデーションを作成します。

1. 基本的な使い方

グラデーションの「方向」と、「開始色」「終了色」を指定するのが基本です。

/* 左から右へ、青から緑へのグラデーション */
.element {
  background: linear-gradient(to right, #3498db, #2ecc71);
}

/* 45度の角度で、紫からピンクへのグラデーション */
.element {
  background: linear-gradient(45deg, #9b59b6, #e91e63);
}

2. 複数の色（中間点）を指定する

カンマ（,）で区切って、3つ以上の色を指定することもできます。色名の後ろにパーセンテージ（%）を指定すると、その色がどの位置から始まるかを制御できます。

/* 3色のグラデーション */
.element {
  background: linear-gradient(to right, #f1c40f, #e67e22, #e74c3c);
}

/* 途中の位置を指定したグラデーション */
.element {
  background: linear-gradient(to right, #3498db 0%, #1abc9c 50%, #f1c40f 100%);
}

---

palette美しいグラデーションの配色パターン

美しいグラデーションを作るには、色の組み合わせが重要です。いくつか人気の配色パターンを紹介します。

/* 落ち着いた、繊細なグラデーション */
.subtle-gradient {
  background-image: linear-gradient(to top right, #f8fafc, #e2e8f0);
}

/* 鮮やかでモダンなグラデーション */
.vibrant-gradient {
  background-image: linear-gradient(to right, #ec4899, #8b5cf6);
}

/* 夕焼けのようなグラデーション */
.sunset-gradient {
  background-image: linear-gradient(to right, #f97316, #fde047);
}

---