Conic gradients
conic-gradient() は CSS の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 conic-gradient() 関数の結果は <gradient> データ型のオブジェクトであり、これは <image> の特殊型です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 69 | 79 | 83 | 12.1 | 69 | 12.2 | |
| CSS タイプ | ||||||
conic-gradient.doubleposition ダブルポジションカラーストップ | 72 | 79 | 83 | 12.1 | 72 | 12.2 |
conic-gradient.single color stop 単色ストップと 0 ～ 1 の位置 | 135 | 135 | 136 | 18.4 | 135 | 18.4 |
| repeating-conic-gradient() は CSS の関数で、（単一のグラデーションではなく）繰り返しのグラデーションからなる、色の遷移が（中心から放射状に広がるのではなく）、中心点の周りを回転する画像を生成します。 | 69 | 79 | 83 | 12.1 | 69 | 12.2 |
基本構文
CSS
.pie-chart {
background: conic-gradient(
#4f46e5 0% 40%,
#06b6d4 40% 70%,
#f59e0b 70% 100%
);
border-radius: 50%;
}
.color-wheel {
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
border-radius: 50%;
}ライブデモ
実務での使いどころ
-
円グラフ
conic-gradient で画像やSVGを使わずにシンプルな円グラフを作成する。
-
カラーホイール
色相環やカラーピッカーの背景をCSSだけで描画する。
注意点
- 円グラフのデータが動的な場合は CSS カスタムプロパティと組み合わせて管理する。
アクセシビリティ
- 円グラフとして使用する場合、数値データはテキストや aria-label でも提供する。視覚だけに頼らない情報伝達を行う。