ウェブサイトで使いたくなる色んな柄の繰り返し背景パターンを、色の組み合わせや柄の不透明度を自由にカスタマイズ&無料でダウンロード可能なのが「Hero Patterns」です。SVG形式のファイルをダウンロードできるほか、CSSコードをコピー&ペーストすることも可能になっています。

Hero Patterns

http://www.heropatterns.com/



デフォルト状態のウェブページには薄い青とやや濃い目の青の背景パターンが並んでいます。市松模様や十字模様などシンプルなものもあれば……



歯車やダイヤ、葉っぱなど、ポップな模様もあります。



画面上部のツールを使って、背景や柄の色を変更可能。柄の色を緑色にしてみました。



さらに、背景色も変更。



柄の不透明度も調整できます。以下は、やや薄めにした様子。



不透明度を上げると柄がくっきりと浮かび上がります。



また、各背景の右下にある「Use Pattern」をクリックすれば……



自分でカスタマイズした背景をダウンロードしたり、CSSコードをゲットしたりが可能。なお、最終的な背景の調整はここでも行えます。



右上の「Download unstyled SVG」を押せばSVGデータをダウンロードできるほか、テキスト欄のCSSコードをコピー&ペーストしてもOKです。



背景パターン自体は62種類なのですが、カラーや不透明度を変更することで、多様な背景パターンを無料でゲットすることができるわけです。









なお、背景パターンは現在も随時更新されているとのことです。