Conic gradients

概要

conic-gradient() は中心点から角度方向に色が遷移するグラデーション。円グラフ・カラーホイール・放射状の装飾パターンをCSSだけで作成できる。from キーワードで開始角度、at キーワードで中心位置を指定可能。repeating-conic-gradient でチェッカーパターンも生成できる。

対応ブラウザ

基本構文

.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だけで描画する。

注意点

アクセシビリティ

• 円グラフとして使用する場合、数値データはテキストや aria-label でも提供する。視覚だけに頼らない情報伝達を行う。

参考リンク

• MDN Web Docs — conic-gradient()
• Can I use — conic-gradient