無料でウェブサイトに使える繰り返し背景パターンをカスタマイズしてダウンロードできる「Hero Patterns」

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

Hero Patterns
http://www.heropatterns.com/

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

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

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

さらに、背景色も変更。

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

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

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

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

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

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

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