linear-gradientで作る横方向グラデーション背景の基本

CSSのbackground: linear-gradient()を使うと、単色背景では出せない柔らかい印象のグラデーションを簡単に実装できます。
今回は「linear-gradient(90deg, #2a4b8d, #496dbe)」を例に、横方向の美しい青系グラデーション背景を作る方法を紹介します。

1 実装のポイント

linear-gradient()は「方向」と「色」を指定して、スムーズに色が変化する背景を生成します。
90degは「左→右」方向を意味し、#2a4b8dから#496dbeへとグラデーションします。

<div class="gradient-box">
  <h2>グラデーション背景のサンプル</h2>
  <p>linear-gradientを使えば、1行のCSSで美しい背景を作れます。</p>
</div>
    

2 汎用CSS

次のCSSでは、青系の横グラデーションを背景に設定しています。
コメントで各行の意味を説明していますので、ぜひ参考にしてください。

/* -----------------------------------------------------
 * linear-gradientで作る横方向グラデーション背景
 * ----------------------------------------------------- */

.gradient-box { /** グラデーション背景を持つボックス **/
  background: linear-gradient(90deg, #2a4b8d, #496dbe); /** 左→右に青のグラデーション **/
  color: #fff; /** テキストを白にして見やすく **/
  padding: 40px; /** 内側に余白を確保 **/
  border-radius: 10px; /** ボックスの角を少し丸く **/
  text-align: center; /** テキストを中央寄せ **/
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); /** 柔らかい影を追加して浮かせる **/
  max-width: 600px; /** 横幅を制限して整える **/
  margin: 30px auto; /** 上下中央揃えにする **/
}

.gradient-box h2 { /** 見出しのスタイル **/
  font-size: 1.5em; /** 少し大きめの文字 **/
  margin-bottom: 10px; /** 下に余白を追加 **/
}

.gradient-box p { /** 段落テキスト **/
  font-size: 1em; /** 標準サイズ **/
  line-height: 1.8; /** 読みやすい行間 **/
}
    

3 応用例

角度を変更することで、グラデーションの方向を自由に変えることができます。

/* 斜め方向のグラデーション例 */
.gradient-diagonal { /** 45度の斜め方向グラデーション **/
  background: linear-gradient(45deg, #2a4b8d, #496dbe); /** 右下方向へ色が変化 **/
}
    

4 完成イメージ

6 まとめ

background: linear-gradient() はシンプルかつ表現力豊かなデザイン手法です。
単色よりも立体感を持たせたいときや、見出し・ボタンの背景装飾にも活用できます。
「90deg」＝横方向、「45deg」＝斜め方向、「180deg」＝右→左 など、角度を意識すると自在にコントロールできます。