CSS Reference

repeating-conic-gradient()

扇型のグラデーションを繰り返して表示する

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

repeating-conic-gradient() 関数の基本的な構文は、conic-gradient() 関数と同じです。

conic-gradient() 関数におけるカラーストップの配置で、各色に角度を指定しなかった場合は 360deg を指定された色の数で均等に割り振りましたが、repeating-conic-gradient() 関数の場合は、最後の色に、360deg（100%）未満の角度の指定がないと繰り返しが行われません。

グラデーションの例

background-image: repeating-conic-gradient(gold, #f06 20deg);

background: repeating-conic-gradient(
  hsla(0,0%,100%,.2) 0deg 15deg,
  hsla(0,0%,100%,0) 0deg 30deg
) #0ac;

background-image: repeating-conic-gradient(
  from 45deg at 10% 50%,
  brown 0deg 10deg,
  darkgoldenrod 10deg 20deg,
  chocolate 20deg 30deg
);

background-image: repeating-conic-gradient(
  red 0%,
  yellow 15%,
  red 33%
);

主要ブラウザの対応

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