radial-gradientとrepeating-radial-gradient

repeating-radial-gradient

線形グラデーションのlinear-gradientを繰り返すrepeating-linear-gradientがある(参考:linear-gradientとrepeating-linear-gradient)ように、放射状グラデーションのradial-gradientを繰り返すrepeating-radial-gradientプロパティも存在します。

repeating-linear-gradientと同じく、最後の色位置指定までを繰り返す形で埋め尽くします。

上サンプル{
 background: radial-gradient( at top left,coral , pink 20%);
}
下サンプル{
 background: repeating-radial-gradient( at top left,coral , pink 20%);
}
 
 

radial-gradientの場合、20%位置でグラデーションが終了し、残りは最後に指定した色での塗りつぶしになりますが、repeating-radial-gradinetの場合はグラデーションの繰り返しになります。

細かく指定すればradial-gradientでもかなり再現できます。

#{ 
 background: radial-gradient( at top left,coral,pink 20%,coral 20%,pink 40%,coral 40%,pink 60%,coral 60%,pink 80%,coral 80%,pink 100%) ;
}

repeating-radial-gradientプロパティの指定については、radial-gradientと同じですので、詳しくは「radial-gradient」をご確認ください。

下のサンプルはレコード盤をrepeating-radial-gradientで表現しています。
アニメーションについては「cssアニメーションの基本」をご参照ください。

See the Pen repeating-radial-gradient by Takashi Abe (@TakeshiAbe) on CodePen.