CSS Reference

repeating-radial-gradient()

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

repeating-radial-gradient() 関数は、画像のデータ型で値を指定できるプロパティにおいて、円形のグラデーションを繰り返して表示します。

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

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

グラデーションの例

background-image: repeating-radial-gradient(circle closest-side, white 0px, black 20px);
background-image: repeating-radial-gradient(#e66465, #9198e5 20%);

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

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

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

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

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

Edge(EdgeHTML)
Edge(Chromium)
Firefox
Chrome
Safari
iOS Safari
Android Chrome