CSSでグラデーション、ストライプ、クロス模様

関連ページ どうもサイトが殺風景なので、背景を縞々模様にして少し華やかさを加えようと思っていました。
background-image: repeating-linear-gradientでそれが出来たのでメモ。
最初にグラデーション、次にストライプ、クロス模様と解説します。 シンプルに上から下へ、水色から白に変わっていくコードは次の通り。 表示結果は次の通りで、下にスクロールするとグラデーションが反復してるのが分かります。

Windowサイズを変えると、グラデーションの幅と反復の頻度も変わります。

Windowサイズによって模様の間隔が変わってしまうのは不便で実用性がないです。
background-sizeを使うことでそのグラデーションが完結するまでのサイズを指定できます。
第一引数がx軸のサイズ、第二引数がy軸のサイズ。
最初に角度を指定することでグラデーションの方向を変えることができます。
例えば45degと入力すれば左下から右上にグラデーションします。
グラデーションは何も二色限定ではなく、いくらでも追加ができます。
下は水色＞白＞橙色の順。
グラデーションを応用することでストライプ模様も表現できます。
repeating-linear-gradientは、「何pxから何pxまでは同じ色」といった指定ができます。
下のコードでは、0pxから30pxまでは同じ水色を続けて、残りの20pxは水色から白色のグラデーションになります。
残りの20pxに対しても同じ白色を続けるようにすれば、完全にグラデーションが消えて二色のみになります。
片方の色の間隔を短くすれば、一般的にイメージされるストライプ模様になります。

ストライプ模様を応用することでクロス模様も表現できます。
単純に２つの線を角度を変えて、２回描画すれば完成ですが、普通にやると２回目の描画で１回目の描画を塗りつぶしてしまいます。
そこで透明色を使う必要があります。
下のコードはまず背景色をbackground-colorで設定して、その上に反復表示で白線を塗っています。
白線以外の部分はtransparent（透明）を指定して、background-colorがそのまま表示されるようにしています。

repeating-linear-gradientは、1つのbackground-imageの中に複数入力ができます。
縦縞と横縞を組み合わせたものが下のコードです。