勾配

The CSS Podcast - 021: Gradients

サイトを作成していて、上部に見出し、概要、ボタンを含む導入があるとします。デザイナーから、この導入部分の背景が紫色のデザインが提供されました。唯一の問題は、背景に 2 色の紫色がグラデーションとして使用されていることです。具体的な方法は次のとおりです。

最初は、デザインツールから画像をエクスポートする必要があると思われるかもしれませんが、代わりに linear-gradient を使用できます。

グラデーションは画像であり、画像を使用できる場所であればどこでも使用できますが、CSS で作成され、色、数値、角度で構成されています。CSS グラデーションを使用すると、2 色間の滑らかなグラデーションから、複数のグラデーションを組み合わせて繰り返すことで印象的なアートワークまで、あらゆるものを作成できます。

線形グラデーション

linear-gradient() 関数は、2 つ以上の色の画像を段階的に生成します。複数の引数を取りますが、最もシンプルな構成では、次のように色を渡すと、自動的に均等に分割され、ブレンドされます。

.my-element {
    background: linear-gradient(black, white);
}

角度を表す角度またはキーワードを渡すこともできます。キーワードを使用する場合は、to キーワードの後に方向を指定します。つまり、左（黒）から右（白）に黒と白のグラデーションを作成する場合は、最初の引数として角度を to right として指定します。

.my-element {
    background: linear-gradient(to right, black, white);
}

色が停止し、隣接する色と混ざる場所を定義するカラーストップ値。暗い赤色から始まり、45 度の角度でグラデーションするグラデーションの場合、グラデーションのサイズの 30% で明るい赤色に変化します。次に例を示します。

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

linear-gradient() には、色とカラーストップをいくつでも追加できます。グラデーションを重ねて表示するには、各グラデーションをカンマで区切って指定します。

円形グラデーション

円形に放射状に広がるグラデーションを作成するには、radial-gradient() 関数を使用します。linear-gradient() に似ていますが、角度を指定する代わりに、必要に応じて位置と終了形状を指定します。色のみを指定した場合は、radial-gradient() が位置を center として自動的に選択し、ボックスのサイズに応じて円または楕円を選択します。

.my-element {
    background: radial-gradient(white, black);
}

グラデーションの位置は、キーワードや数値を使用する background-position に似ています。円形グラデーションのサイズは、グラデーションの終了形状（円または楕円）のサイズを決定します。デフォルトでは farthest-corner になります。つまり、ボックスの中心から最も遠い角に正確に収まります。次のキーワードも使用できます。

• closest-corner は、グラデーションの中心から最も近いコーナーに配置されます。
• closest-side は、グラデーションの中心から最も近い側のボックスの端に配置されます。
• farthest-side は closest-side とは逆の動作を行います。

linear-gradient と同様に、カラーストップは必要な数だけ追加できます。同様に、radial-gradients はいくつでも追加できます。

円錐形グラデーション

円錐状のグラデーションは、ボックス内に中心点があり、（デフォルトでは）上から始まり、360 度円を描くように変化します。

.my-element {
    background: conic-gradient(white, black);
}

conic-gradient() 関数は、位置と角度の引数を受け入れます。

デフォルトでは、角度は 0 度で、上部の中央から始まります。角度を 45deg に設定すると、右上隅になります。angle 引数には、リニア グラデーションや放射状グラデーションなど、任意の角度値を指定できます。

デフォルトでは中央に配置されます。放射状グラデーションや線形グラデーションと同様に、配置はキーワードベースにするか、数値で定義できます。

他のグラデーション タイプと同様に、カラーストップは必要な数だけ追加できます。円錐状のグラデーションを使用するこの機能のユースケースとして、CSS で円グラフをレンダリングする方法があります。

繰り返しとミックス

各タイプのグラデーションには、繰り返しタイプもあります。repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient() です。繰り返し関数と似ており、同じ引数を受け取ります。違いは、定義されたグラデーションを繰り返してボックスを塗りつぶすことができる場合、両方のサイズに基づいて塗りつぶされる点です。

グラデーションが繰り返されない場合は、いずれかのカラーストップの長さを設定していない可能性があります。たとえば、カラーストップ の長さを設定することで、repeating-linear-gradient でストライプの背景を作成できます。

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

background プロパティでグラデーション関数を組み合わせたり、背景画像と同様にグラデーションをいくつでも定義したりすることもできます。たとえば、複数の線形グラデーションを組み合わせたり、2 つの線形グラデーションと放射状グラデーションを組み合わせたりできます。

補間と色空間

各グラデーション タイプは、カラースペースと in キーワードを使用して、さまざまな方法で色を補間できます。このオプションを使用すると、グラデーション内の2 つのカラーストップ間の結果をカスタマイズできます。

たとえば、oklab 色空間を使用すると、一般的に不飽和の中間色を削除し、より安全で鮮やかなグラデーションを実現できます。

.my-element {
  background: linear-gradient(in oklch, deeppink, yellow);
}

次のデモでは、カスタマイズされた補間ありとなしで同じグラデーションを比較できます。カラースペースを変更して比較したり、色を変更して補間がグラデーションにどのように影響するかを確認したりできます。

円筒形のカラースペース（HSL、HWB、LCH、OKLCH）では、補間に加えて、shorter（デフォルト）または longer キーワードを使用して、グラデーション線が色相環の長い経路をたどるか、2 つの色の間の短い経路をたどるかを指定できます。

.my-element {
  background: linear-gradient(in oklch longer hue, deeppink, yellow);
}

リソース

• MDN の勾配ガイド
• グラデーション生成ツール
• Conic.css - 円錐状のグラデーションの便利なコレクション

理解度を確認する

グラデーションに関する知識をテストする

グラデーションを作成するために必要な色の最小数はいくつですか？

1

もう一度考えてみましょう。

2

同じ色で塗りつぶしても構いませんが、少なくとも 2 色は必要です。

3

もう一度考えてみましょう。

4

もう一度考えてみましょう。

要素の背景に複数のグラデーションを設定できますか？

正しい

background-image プロパティでは、複数のグラデーションを指定できます。グラデーションをカンマで区切ってください。

False

はい、できます。