コピペで使えるCSSのbackground:linear-gradientで背景にグラデーションを表示

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>