CSSでグラデーションの背景色を設定する方法

CSSでグラデーションの背景色を設定するには、linear-gradient()を追加する必要があります backgroundに機能する 財産。

簡単なボックスクラスを作成して試してみましょう：

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

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

結果：

線形グラデーション関数内で色を並べ替えることで、開始色と終了色を変更できます。

/* Starting red, finishing yellow */
 background: linear-gradient(red, yellow);

線形グラデーションの角度/傾斜を変更します

上記の例でわかるように、linear-gradient() 関数は、デフォルトで上から下へのグラデーションを作成します。グラデーションの角度は好きなように簡単に変更できます。

たとえば、45度傾斜した線形グラデーションは次のとおりです。

/* Starting yellow, finishing red */
linear-gradient(45deg, yellow, red);

結果：

0から360までの任意の次数を使用できます。

グラデーションに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%);
}