PNG画像として保存できますか？

このツールはSVGとCSS backgroundの生成に特化しています。ラスター画像が必要な場合は、生成したSVGを別途画像変換ツールで変換してください。

SVG optimizer と併用できますか？

はい。生成した raw SVG を SVG最適化ツールに貼り付けると、さらに軽量化できます。

デザイン・Web制作

SVG パターン背景ジェネレーター

ドット、グリッド、斜線、チェッカーの繰り返し背景を SVG / CSS background / data URI として生成するツール。色・透明度・タイルサイズを調整可能。

パターン

タイルサイズ: 24px線・点の太さ: 2px透明度: 35%

色背景

CSS background

background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20fill%3D%22%23db2777%22%20opacity%3D%220.35%22%2F%3E%3C%2Fsvg%3E");
background-size: 24px 24px;

Raw SVG

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" fill="#ffffff"/><circle cx="12" cy="12" r="3" fill="#db2777" opacity="0.35"/></svg>

このツールについて問い合わせる →

SVG パターン背景ジェネレーターについて

SVG pattern ジェネレーターとは

SVG pattern ジェネレーターは、ドット、グリッド、斜線、チェッカーなどの繰り返し背景をSVGとCSS backgroundとして作成するツールです。色、透明度、タイルサイズ、線の太さを調整し、data URI や raw SVG をコピーできます。

SVG波形ジェネレーターがセクション区切り用の波形に向いているのに対し、このツールは背景パターンやUI面の質感作りに特化しています。

使いどころ

LPや管理画面の薄い背景パターンを作る
プレースホルダー画像やOGP素材の背景に使う
CSSだけで軽量な繰り返し背景を実装する

よくある質問

Q. PNG画像として保存できますか？: このツールはSVGとCSS backgroundの生成に特化しています。ラスター画像が必要な場合は、生成したSVGを別途画像変換ツールで変換してください。
Q. SVG optimizer と併用できますか？: はい。生成した raw SVG を SVG最適化ツールに貼り付けると、さらに軽量化できます。