CSSグラデーションを使用すると、2つ以上の指定された色の間の滑らかな遷移を表示できます。

CSSでは、次の3種類のグラデーションが定義されています。

• 線形グラデーション(下/上/左/右/斜め)
• 放射状グラデーション(中心で定義)
• 円錐グラデーション(中心点を中心に回転)

CSS線形グラデーション

線形グラデーションを作成するには、少なくとも2つのカラーストップを定義する必要があります。カラーストップは、スムーズなトランジションをレンダリングしたい色です。グラデーション効果とともに、開始点と方向(または角度)を設定することもできます。

構文

方向 - 上から下(これがデフォルトです)

次の例は、上から始まる線形グラデーションを示しています。赤で始まり、黄色に変わります。

方向 - 左から右

次の例は、左から始まる線形グラデーションを示しています。赤で始まり、黄色に変わります。

方向 - 斜め

水平方向と垂直方向の両方の開始位置を指定して、斜めにグラデーションを作成できます。

次の例は、左上から始まり、右下に向かう線形グラデーションを示しています。赤で始まり、黄色に変わります。

角度の使用

グラデーションの方向をさらに制御したい場合は、定義済みの方向(下、上、右、左、右下など)の代わりに角度を定義できます。0degの値は「上へ」と同等です。90degの値は「右へ」に相当します。180degの値は「底まで」に相当します。

構文

次の例は、線形グラデーションで角度を使用する方法を示しています。

複数のカラーストップの使用

次の例は、複数のカラーストップを持つ線形グラデーション(上から下)を示しています。

次の例は、虹の色といくつかのテキストを使用して(左から右へ)線形グラデーションを作成する方法を示しています。

透明度の使用

CSSグラデーションは透明度もサポートしており、フェード効果を作成するために使用できます。

透明度を追加するには、rgba()関数を使用してカラー ストップを定義します。rgba()関数の最後のパラメーターは0から1の値で、色の透明度を定義します。0は完全な透明度を示し、1は完全な色(透明度なし)を示します。

次の例は、左から始まる線形グラデーションを示しています。最初は完全に透明で、完全な色の赤に移行します。

線形勾配の繰り返し

線形グラデーションを繰り返すには、repeat-linear-gradient()関数を使用します。