Pattern Generator

使い方

1. 種類を選びます。ストライプ・ドット・グリッド・チェッカーの 4 種です。どれも小さな 1 単位から敷き詰めるので、画面が大きくても継ぎ目が立ちません。
2. タイルサイズを設定します。これが繰り返し単位です。24 px は細かい質感、60 px 以上は意図したモチーフとして読めます。
3. ストライプでは角度を動かして繰り返し単位を回転できます。他の 3 種は角度を使わないため、スライダーは自動的に無効になります。
4. 前面色でモチーフを、背景色で隙間を塗り、プレビューでタイル敷きを確認します。
5. コードをコピーします。CSS ブロックはそのまま任意の HTML 要素に適用でき、SVG ブロックは同じ図形を <pattern> 要素に包んだもので、書き出しやデザインツール向けです。

こんなときに

• セクションやカードの背景 —— 料金表や機能グリッドの背後に低コントラストのドットを敷く。
• 印刷やプレゼン資料 —— SVG パターンは拡大しても劣化せず、ラスタ画像のテクスチャでは困難です。
• 空状態やログイン画面 —— 浅い角度のストライプで質感を足しつつ焦点を奪わない。
• ワイヤーフレームの資料 —— チェッカー塗りで仮置き領域を示しても視覚的に静かです。

プライバシーについて

すべての値はページ内でコードに変換され、プレビューは生成された CSS そのもので装飾されています。アップロードはなく、サーバー側で画像が作られることもありません。

FAQ

Q: ドットとグリッドで角度スライダーが効かないのは？ A: これらは軸に沿ったタイルで構成されています。円 1 つと直線 2 本です。回すには外側の transform が必要になり、スニペットでは避けているため、角度は斜めストライプにのみ適用されます。

Q: パターンをページの一部だけに適用するには？ A: body ではなく特定の要素に CSS を当てます。スニペットの .pattern-area というクラス名は、マークアップのクラス名に書き換えるためのものです。

Q: パターンを 2 つ重ねられますか？ A: はい。CSS は背景を複数層扱えるので、background-image 行をもう 1 行貼り、それぞれに background-size を設定します。両方を見せたい場合は上の層を半透明にしてください。

Q: CSS と SVG のどちらを選ぶべきですか？ A: ブラウザで描画するものには CSS ブロックを。対象がデザインツール・PDF・画像書き出しなら SVG ブロックを。CSS グラデーションはこれらの場面では持ち運べません。