CSSパターン背景ジェネレーター
繰り返しの模様（ストライプ、ドット、チェック）を背景に敷くためのCSSとSVGを生成します。画像ファイルを用意せず、repeating-linear-gradientなどのグラデーションだけで描くCSSと、そのまま貼り付けられるSVGの両方を出力できます。なめらかな色の変化を作りたいときは CSSグラデーションジェネレーター、波形の区切りには SVG波形ジェネレーター も使えます。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
プレビュー
使い方
- 「パターンの種類」でストライプ・ドット・チェックのいずれかを選びます（プリセットから始めることもできます）。
- 「背景色」と「パターンの色」、「サイズ」「角度」「太さ・直径」を調整し、プレビューで確かめます。
- 「出力形式」でCSSかSVGを選びます。
- 「コピー」ボタンで、表示されたコードを自分のスタイルシートに貼り付けます。
注意事項
- チェックの「サイズ」は1マスの大きさです。CSSではその2倍の大きさで繰り返します。
- 「角度」はCSSの linear-gradient と同じ向きです（0度が上向き、時計回り）。ストライプのみに効きます。
- SVGは幅・高さを100%にしているため、背景に使うと指定した領域全体に模様が広がります。模様の大きさはpx単位で固定です。
- `conic-gradient`を使うチェックは、ごく古いブラウザでは表示されません。その場合はSVG形式を使ってください。
- 色は#RRGGBB（#RGBも可）のみ受け付け、それ以外は初期色に置き換えます。
用語解説
repeating-linear-gradient
指定した色の並びを、決めた幅ごとに繰り返す線形グラデーション。色の境目を同じ位置に置くと、はっきりした縞になる。
conic-gradient
中心点のまわりを角度で色分けするグラデーション。4分割で色を交互に置くとチェック柄を1枚で描ける。
data URI
画像などのデータをURLの形で直接書き込む方式。SVGの場合は文字列のまま埋め込めるので、別ファイルを読み込む必要がない。
よくある質問
画像ファイルなしでストライプや水玉の背景は作れますか？
作れます。ストライプは`repeating-linear-gradient`、ドットは`radial-gradient`にbackground-sizeを組み合わせ、チェックは`conic-gradient`で描きます。CSSだけで完結するので、画像の読み込みやリクエストは発生しません。
CSS形式とSVG形式はどう使い分けますか？
CSS形式は軽量で、色や大きさを後からCSS変数で書き換えやすいのが利点です。SVG形式は`url("data:image/svg+xml,...")`として背景に指定でき、`conic-gradient`に対応していない古いブラウザでも使えます。ただしコードが長くなります。
ストライプの角度は何度が基準ですか？
CSSの`linear-gradient`と同じで、0度が上向き、時計回りに増えます。0度なら横縞、90度なら縦縞、45度なら右上がりの斜め縞になります。ドットとチェックには角度は適用されません。
チェック柄のサイズは何を指しますか？
「サイズ」は1マスの一辺です。CSSでは2×2マスを1タイルとして繰り返すため、`background-size`にはその2倍の値が出力されます。
パターンの縁がギザギザに見えるのはなぜですか？
グラデーションで色の境目を同じ位置に置くと、画面の解像度によっては縁がにじまず、階段状に見えることがあります。ドットは境目を1pxかけて変化させて軽減していますが、気になる場合はSVG形式を試してください。
このページをシェア