CSSでグラデーション背景色を設定する方法をわかりやすく解説

CSSでグラデーションの背景色を設定するには、backgroundプロパティにlinear-gradient()関数を指定します。画像ファイルを用意する必要がなく、CSSだけで美しいグラデーション表現が実現できるのが魅力です。

基本的なグラデーションの設定方法

まずはシンプルなボックス要素を作成し、実際にグラデーションを適用してみましょう。

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background: linear-gradient(yellow, red);
}

このコードでは、200px四方のボックスに対して、上の黄色（yellow）から下の赤（red）へと変化するグラデーションが適用されます。

色の順序を入れ替える

linear-gradient()関数内で色の記述順序を入れ替えれば、グラデーションの開始色と終了色を自由に変更できます。

/* 赤で始まり、黄色で終わる */
 background: linear-gradient(red, yellow);

順序を逆にするだけで、グラデーションの色の流れも反転します。直感的で扱いやすいのがポイントです。

グラデーションの角度（傾き）を変更する

先ほどの例のように、linear-gradient()関数はデフォルトで上から下へのグラデーションを生成します。しかし、角度を指定すれば、好きな方向へのグラデーションも簡単に作れます。

例えば、45度に傾いたグラデーションは次のように記述します。

/* 黄色で始まり、赤で終わる */
linear-gradient(45deg, yellow, red);

角度には0〜360度までの任意の値を指定可能です。0degは下から上、90degは左から右へと変化するグラデーションになり、角度の指定次第で多彩な表現が楽しめます。

HEX・RGB・RGBaカラーをグラデーションに使う

グラデーションには、HEX、RGB、RGBaなどさまざまなカラーモデルを使用できます。中でもRGBaはアルファチャンネル（透明度）を扱えるため、最も柔軟性の高い指定方法です。

RGBaを活用すれば、透明度を組み合わせた複雑でクリエイティブなグラデーションも思いのままに作成できます。

以下は、複数のグラデーションを重ね合わせた例のCSSコードです。

{
    background: linear-gradient(217deg, 
    rgba(255,0,0,.8), 
    rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, 
    rgba(0,255,0,.8), 
    rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, 
    rgba(0,0,255,.8), 
    rgba(0,0,255,0) 70.71%);
}

このように複数のlinear-gradient()をカンマで区切って指定すると、異なる角度と色を持つグラデーションを1つの要素に重ねて合成できます。透過を組み合わせることで、奥行きのあるリッチなビジュアル表現が可能になるので、ぜひ試してみてください。