CSSパターン背景ジェネレーター
縞、ドット、チェッカーボード、グリッド、斜めクロスハッチ、三角のタイルパターン背景を、画像を一切使わず本物の重ね合わせCSSグラデーションから作成するか、同じパターンをSVGの<pattern>としてエクスポートしてSVGドキュメント内で使用できます。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
多くの「パターンジェネレーター」ツールは、すべてのオプションに同じrepeating-linear-gradientの式を静かに使い回し、数値だけを変えています。このツールは違います：ここにある6つのパターンタイプは、それぞれその形状を実際に生み出す特定のCSSテクニックで構築されています。縞模様は2色のバンドを持つ単一のrepeating-linear-gradientを使用します。ドットは、background-sizeだけで純粋にタイル化した1つのradial-gradient——古典的なCSSドットの手法——を使います。これは、矩形グリッド上で円形のドットをきれいにタイル化できないrepeating-radial-gradientの代わりです。チェッカーボードは本物の4象限conic-gradientの式を用います：正方形のタイルの中心に配置されたconic gradientは、90度の境界で自然に4つの象限正方形に分割され、それらの象限に2色を交互に配置することで、近似ではなく本物のチェッカーボードにタイル化されます。
グリッドと斜めクロスハッチは、borderのトリックで第二の方向を偽装するのではなく、2つのrepeating-linear-gradientを別々のbackground-imageエントリとして重ねます。グリッドは「to right」と「to bottom」の繰り返しグラデーションを組み合わせ、くっきりした水平と垂直の罫線を実現します。クロスハッチは+45度と-45度の繰り返しグラデーションを重ね、籠目織り風の斜めの織り模様を生み出します——正確を期すために：これは正直なクロスハッチであり、本物のヘリンボーン幾何学ではありません。ツールは誇張せずそのようにラベル付けしています。三角はチェッカーボードの4つのくさび形conic-gradientテクニックを再利用しますが、グラデーションの開始角度を45度回転させることで、くさびの境界がタイルの辺の中点から角に移動し、同じ4つのくさびが4つの象限正方形の代わりに、角から角へ向かう4つの三角形に変わります。
各パターンタイプは、実際に適用されるコントロールだけを表示します——角度スライダーは縞模様用、ドットの半径と間隔はドット用、線の太さはグリッドとクロスハッチ用に現れます。また、大きなタイルプレビューボックスは変更のたびに再描画されるので、値を確定する前に完全な繰り返しを何度も確認できます。出力モードをSVGに切り替えると、同じパターンがプレーンなrect、circle、path、またはpolygonプリミティブで構築された<pattern>要素として再現され、任意のSVGドキュメントの<defs>内に貼り付け可能で、単体の.svgファイルをワンクリックでダウンロードできます。
すべてはブラウザ内でローカルに動作します：画像アップロードなし、サーバーとの通信なし、アカウントなし。繰り返しのない単色やグラデーション塗りつぶしには、代わりに当サイトのCSSグラデーションジェネレーターが適切なツールです。こちらは画像アセットを一切使わずに作成する、タイル化可能な幾何学模様の背景専用です。