CSSで線形グラデーション放射状グラデーションを簡単に実行できます。現在、仕様と定義される3番目のタイプのグラデーションがあります。 円錐曲線のグラデーションは放射状のグラデーションに似ていますが、カラーストップが作成される円の外縁にある点が異なります。

たとえば、同じ色のストップを持つ放射状グラデーションと円錐曲線を次に示します。

.gradient {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.radial {
  background: radial-gradient(#FAE042, #4AAE9B);
}
.conic {
  background: conic-gradient(#FAE042, #4AAE9B);
}

そして、ここにマークアップがあります:

<div class="gradient radial"></div>
<div class="gradient conic"></div>

その他の例/構文

円錐曲線のグラデーションには、複数のカラーストップを含めることができます。

.conic {
  background: conic-gradient(cyan, magenta, yellow, black);
}

各色は、度、回転、パーセンテージなどの単位を使用して、停止位置を指定できます。

.conic {
  background: conic-gradient(red 180deg, #4AAE9B);
}
.conic-2 {
  background: conic-gradient(red 180deg 90%, #4AAE9B);
}

カラーストップの2番目の位置の値が遷移を指定する方法に注意してください。


ハードストップ

カラーストップは、2つのストップ間の遷移を排除することにより、すぐに次のカラーにジャンプできます。

.conic-4 {
  background: conic-gradient(cyan 25%, magenta 0 50%, yellow 0 75%, black 0);
}

キーワードからおよびキーワードで

from キーワードを使用して、開始角度を指定できます。

.conic {
  background: conic-gradient(from 45deg, cyan, magenta, yellow);
}

さらに、 at キーワードを使用して、遷移の中心を指定できます。

.conic {
  background: conic-gradient(from 45deg at 65% 35%, cyan, magenta, yellow);
}

残念ながら、現時点では at の使用例を示すことはできません。これは、この記事の執筆時点でポリフィルにバグがあり、他のすべての例を表示するとクラッシュするためです。ポリフィルに依存するブラウザ。

スムーズな移行

スムーズに移行するには、最後のカラーストップを最初のカラーストップと同じにします。

.conic {
  background: conic-gradient(cyan, magenta, yellow, cyan);
}

円錐曲線のグラデーションを繰り返す

repeating-conic-gradient関数もあり、円錐曲線のグラデーションでいくつかの興味深いパターンを作成するために使用できます。

.conic-repeating {
  background: repeating-conic-gradient(red 10%, #4AAE9B 20%);
}

ポリフィル

2020年の時点で、世界中で85% ofのデバイスのみが円錐勾配プロパティをサポートしています。 ありがたいことに、 polyfill by @LeaVerou があり、これを使用して円錐曲線グラデーションの使用を開始できます。

ポリフィルを使用するには、プレフィックスフリーのスクリプトと、ページの終了本文タグの前に円錐曲線ポリフィル自体を追加するだけです。

<script src="/assets/polyfills/prefixfree.min.js"></script>
<script src="/assets/polyfills/conic-gradient.js"></script>