4つ目のパラメータの数値によって格子の幅を変更できます。
background-image:
repeating-linear-gradient(
#000 , /*元の色*/
#000 1px, /*元の色の幅*/
#fff 1px, /*グラデーション幅*/
#fff 24px);/*繰り返しの間隔*/
改行幅に合わせることもできそうです。
繰り返し幅を短くして,更に細かくしていきます。縞模様ができました。
background-image:
repeating-linear-gradient(
#888 ,/*元の色*/
#888 1px,/*元の色の幅*/
#fff 1px,/*グラデーション幅*/
#fff 2px/*繰り返しの間隔*/);
グラデーションします。
background-image:
repeating-linear-gradient(
#088 ,/*元の色*/
#fff/*終着色*/ )/*グラデーションします。*/;
水色をイメージしてグラデーションにしました。
与えられた幅を目いっぱい使ってグラディエイトします。
グラデーションを繰り返します。
background-image:
repeating-linear-gradient(
#088 ,/*元の色*/
#fff 30px)/*グラデーションの幅です。*/;
水色をイメージしてグラデーションにしました。
与えられた幅を目いっぱい使ってグラディエイトします。
虹を作ってみました。
background-image:
repeating-linear-gradient(
#f00,/*元の色*/
#c80,/*2番目の色*/
#cc0,/*次の色*/
#8f0,/*次の色*/
#0f8,/*次の色*/
#08f,/*次の色*/
#00f/*終着色*/);
色はいくつも混ぜることができます。
与えられた幅を目いっぱい使ってグラディエイトします。
虹色ができました。
50%で区切ると,くっきり半分にわかれます。
background-image:
repeating-linear-gradient(
#088,/*元の色*/
#088 50%,/*元の色の幅*/
#999 50%,/*グラデーション幅*/
#999/*終着色*/);