🔳 SVG 背景パターン生成ツール

ドット・格子・ストライプ・斜線・チェックの5種類の繰り返しパターンを、模様の色と背景色、タイルサイズで調整して作成できます。結果は容量のとても小さいSVGを1つ繰り返す方式なので、どんなサイズの領域にも鮮明に敷き詰められるCSS背景コードとしてそのままコピーできます。

使い方

1. タブでドット・格子・ストライプなどのパターンの種類を選びます。
2. タイルサイズと点・線の太さのスライダーで密度を調整します。
3. 模様の色と背景色を指定して好みの雰囲気に合わせます。
4. 下の「CSSコピー」でbackgroundコードを、「SVGコピー」で元のSVGを取得します。

よくある質問

なぜ画像ファイルではなくSVGなのですか?

SVGはベクターなので拡大しても粗くならず、データURIとして入れれば別のファイル要求なしにCSS内でそのまま繰り返され、ページが軽くなります。

模様を半透明にしたいです。

模様の色のHEXの後ろにアルファ値を付ければできます。たとえば#6366f180は約50%の透明度のインディゴです。背景色と自然に重なって、ほのかなテクスチャになります。

生成されたコードをそのまま使っても安全ですか?

標準のSVGとCSSのbackgroundプロパティだけを使うので、最新のブラウザで問題なく動作します。ただし色のコントラストが強すぎると本文の読みやすさを損なうことがあるので、実際の画面で確認する参考用としてお使いください。