勾配

CSS ポッドキャスト - 021: グラデーション

作成するサイトの上部に 見出し、サマリー、ボタンを備えた イントロが表示されるとしますデザイナーが、このイントロ用に紫色の背景のデザインを渡しました。 唯一の問題は、背景がグラデーションとして 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 つの線形グラデーションを円形グラデーションに結合することもできます。

関連情報

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

理解度チェック

勾配に関する知識をテストする