CSS conic-gradient() 関数

定義と使用法

CSSの conic-gradient() この関数は、背景画像に錐形グラデーションを設定します。

錐形グラデーションは、中心点を中心に回転する色の移行（パイチャートや色輪に似ています）です。

錐形グラデーションを作成するには、少なくとも2つの色停止点を定義する必要があります。

錐形グラデーションの例：

インスタンス

例 1

3色の錐形グラデーションがあります：

#grad {
  background-image: conic-gradient(red, yellow, green);
}

実際に試してみる

例 2

5色の錐形グラデーションがあります：

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

実際に試してみる

例 3

3色があり、それぞれの色に角度を指定する錐形グラデーションがあります：

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

実際に試してみる

例 4

border-radius: 50% を追加することで、錐形グラデーションがパイチャートのように見えます：

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

実際に試してみる

例 5

始点角度を持つ円錐状のグラデーション：

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

実際に試してみる

例 6

中心位置を持つ円錐状のグラデーション：

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

実際に試してみる

例 7

同時に始点角度と中心位置を持つ円錐状のグラデーション：

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

実際に試してみる

例 8

別の円グラフの例：

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

実際に試してみる

CSS 语法

background-image: conic-gradient([from angle] position,] color degree, color degree, ... );
値 説明
from angle オプション。全体の円錐状のグラデーションがこの角度で回転します。デフォルト値は 0deg です。
at position オプション。円錐状のグラデーションの中心位置を指定します。デフォルト値は center です。
color degree, ... , color degree

色停止点は、滑らかな移行を希望する色が表示される場所です。

この値は、色値とオプションの停止位置（0 から 360 度の角度または 0% から 100% のパーセンテージ）で構成されています。

技術的な詳細

バージョン： CSS3

ブラウザのサポート

テーブルの数字は、その関数を完全にサポートする最初のブラウザのバージョンを示しています。

クローム エッジ ファイアフォックス サファリ オペラ
69 79 83 12.1 56

関連ページ

チュートリアル：CSS 渐変

参考：CSS background-image 属性

参考：CSS linear-gradient() 関数

参考：CSS radial-gradient() 関数

参考：CSS repeating-conic-gradient() 関数

参考：CSS repeating-linear-gradient() 関数

参考：CSS repeating-radial-gradient() 函数