【CSS】グラデーションを使った感触を記録（基本と線形）
【CSS】グラデーションを使った感触を記録2（放射と扇形）
【CSS】グラデーションを使った感触を記録3（反復と合成）

反復（repeating-）

repeating-を先頭に付けるとグラデーションを反復します。

種類	関数	反復
線形	linear-gradient	repeating-linear-gradient
放射	radial-gradient	repeating-radial-gradient
扇形	conic-gradient	repeating-conic-gradient

色経由点の配置

これまでグラデーションの終点はボックスの端（100％）に設定されていました。
しかし、それでは反復させても（放射以外では）意味がないのでグラデーションのサイズ（終点）を自由に決めることができるようになります。

これにより、始点と終点の使い勝手が変わります。

終点の設定

ボックスの端（100％）以外にしたい時は、最後に値を設定します。

repeat-linear-gradient(90deg,red,blue,green 50%);
repeat-linear-gradient(90deg,red,blue,green 100px);

repeat-radial-gradient(90deg,red,blue,green 40% 50%);
repeat-radial-gradient(90deg,red,blue,green 80px 100px);

repeat-conic-gradient(90deg,red,blue,green 50%);
repeat-conic-gradient(90deg,red,blue,green 45deg);

始点の設定

始点色に色経由点を設定する時は、これまでと違い0を挿入します。

repeat-linear-gradient(90deg,red,blue,green 100px);
repeat-linear-gradient(90deg,red 0 30px,blue,green 100px);

以下のような書き方も見受けられます。

repeat-linear-gradient(90deg,red,red 30px,blue,green 100px);

色経由点の％設定

グラデーション幅に対しての割合ではなく、ボックス端に対しての割合なので注意

使用例

.box1{background:repeating-linear-gradient(90deg,red,blue,green);}.box2{background:repeating-linear-gradient(90deg,red,blue,green50%);}.box3{background:repeating-linear-gradient(90deg,red,blue,green100px);}.box4{background:repeating-linear-gradient(90deg,red015%,blue,green100px);}

合成

複数のグラデーションを重ね合わせることで、様々な表現が可能となります。
この場合、transparentや透過色rgba()を主に使用します。

重ね方は下記のように,でグラデーションを連結させることが出来ます。

.box{background:repeating-linear-gradient(transparent015px,red15px30px),repeating-radial-gradient(transparent015px,blue15px30px),repeating-conic-gradient(transparent015deg,green15deg30deg);}