例で説明されたCSS線形グラデーション

線形グラデーションでは、色は一方向に流れます。たとえば、左から右、上から下、または選択した任意の角度です。

2つのカラーストップのあるグラデーション

構文

線形グラデーションを作成するには、少なくとも2つのカラーストップを定義する必要があります。これらは、トランジションが作成される色です。これは、backgroundまたはbackground-imageプロパティのいずれかで宣言されます。

background: linear-gradient(direction, colour-stop1, colour-stop2, ...);

方向が指定されていない場合、デフォルトの遷移は上から下です。

上から下へ:

background: linear-gradient(red, yellow);
上から下へ

左へのRのIGHT:

左から右にするには、方向を示すlinear-gradient()単語で始まる先頭に追加のパラメーターを追加します。

background: linear-gradient(to right, red , yellow);
左から右へ

対角勾配

左上や右下など、水平方向と垂直方向の開始位置を指定して、グラデーションを斜め​​に遷移させることもできます。

左上から始まるグラデーションのサンプルを次に示します。

 background: linear-gradient(to bottom right, red, yellow);
左上

角度を使用してグラデーションの方向を指定する

角度を使用して、グラデーションの方向をより正確に指定することもできます。

background: linear-gradient(angle, colour-stop1, colour-stop2);

角度は、水平線とグラデーション線の間の角度として指定されます。

background: linear-gradient(90deg, red, yellow);
90度

2色以上を使用

2色だけに限定されるわけではなく、コンマで区切られた色をいくつでも使用できます。

background: linear-gradient(red, yellow, green); 
3色ストップのグラデーション

RGBや16進コードなどの他の色構文を使用して、色を指定することもできます。

硬い色が止まる

グラデーションを使用して色あせた色に移行できるだけでなく、グラデーションを使用して、ある単色から別の単色に瞬時に変更することもできます。

background: linear-gradient(to right,red 15%, yellow 15%);
硬い色が止まる

詳しくは:

  • CSSハンドブック:開発者向けのCSSの便利なガイド