CSSのlinear-gradientで背景にグラデーションをつける方法

CSSのlinear-gradientで背景にグラデーションをつける方法｜角度・色・位置の実例集

CSSのlinear-gradient()を使って、背景にグラデーションをつける方法を紹介します。
このページでは、background: linear-gradient() の基本的な使い方から、角度の指定・複数色のグラデーション・位置の調整・ぼかしとの組み合わせまで、実際に使えるサンプルコードを掲載しています。
「css グラデーション背景」「background linear-gradient」「html グラデーション」などのキーワードでお探しの方におすすめです。

background: linear-gradient()

linear-gradient()は二つ以上の色を指定してグラデーション画像を作成します。

<div style="background:linear-gradient(0deg, pink, yellow);">

0度(下から上)
下(pink)から上(yellow)へのグラデーション

<div style="background:linear-gradient(90deg, #FFAAAA, #FFFFCC);">

90度(左から右)
左(#FFAAAA)から右(#FFFFCC)へのグラデーション

<div style="background:linear-gradient(180deg, #AAFFAA, #FFAAAA, #AAAAFF);">

180度(上から下)
上(#AAFFAA)から中央(#FFAAAA)から下(#AAAAFF)へのグラデーション

<div style="background:linear-gradient(270deg, #FFFFAA 30%, #FFCCFF 50%, #BBFFFF 70%);">

270度(右から左)
右から左へ、0%(#FFFFAA)～30%(#FFFFAA)～50%(#FFCCFF)～70%(#BBFFFF)～100%(#BBFFFF)のグラデーション

background:linear-gradient()を使って、グラデーションの縁を表示する

filter:blur(ガウシアンぼかしの半径);

<div style="position:relative;width:100%;height:30vw;max-width:800px;">
  <div style="background:linear-gradient(135deg, #FFFFCC, #FFCCFF, #CCFFFF);
    filter:blur(8px); width:100%;height:100%;"></div>
  <div style="position:absolute;background:#FFFFFF;left:20px;top:20px;right:20px;bottom:20px;">
    ここに縁内のコンテンツを記述する
  </div>
</div>