CSSのbackground: linear-gradient()を使う

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, #FFCCCC, #FFFFCC);">

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

<div style="background:linear-gradient(180deg, #CCFFCC, #FFCCCC, #CCCCFF);">

180度(上から下)
上(#CCFFCC)から中央(#FFCCCC)から下(#CCCCFF)へのグラデーション

<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:blue(ガウシアンぼかしの半径);
<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>

Mam's WebSite