CSS Reference

conic-gradient()

扇型のグラデーションを表示する

radial-gradient() 関数は、画像のデータ型で値を指定できるプロパティにおいて、扇型（中心点の周りを回りながら色が変化する）グラデーションを表します。

グラデーションを繰り返して表示したい場合は、repeating-conic-gradient() 関数を使用します。

conic-gradient() 関数の基本的な構文は以下の通りです。

conic-gradient() = conic-gradient(
  [ [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method> ]? ,
  <angular-color-stop-list>
)

<angle>

from に続けて角度を指定することで、グラデーション全体を指定した角度だけ回転させます。省略された場合 0deg となります。

<position>

グラデーションの中心位置を指定します。at に続けて center、top、left、bottom、right のキーワード値、もしくはその組み合わせ、あるいは長さやパーセンテージ値を指定します。省略された場合、center として扱われます。

カラーストップの配置（Placing Color Stops）

色のデータ型でグラデーションの色をカンマ（,）区切りで指定します。色と角度を空白文字で区切ってセットで指定することもできます。この場合、どの角度でどの色に変化するか、指定することができます。

色のみを指定し、角度を省略した場合は、色の数に合わせて均一に変化します。

/* 色のみを指定した例（<angle> と <position> は省略） */
background-image: conic-gradient(red, yellow, green);

/* 色と角度をセットで指定した例（<angle> と <position> は省略） */
background-image: conic-gradient(red 0deg, yellow 90deg, green 180deg);

グラデーションの例

background-image: conic-gradient(from 0deg at center, #f06, gold);

background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);

background-image: conic-gradient(red, magenta, blue, aqua, lime, yellow, red);

background-image: conic-gradient(hsl(0,0%,75%), white 45deg, black 225deg, hsl(0,0%,75%));

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome