CSS背景パターンとは？画像を使わずに模様とノイズを敷く
方眼紙・ドット・ストライプ・市松模様などの背景の模様を、画像ファイルではなく CSS のグラデーションで描くツールです。紙のようなザラザラ感（ノイズ）も、SVG のフィルター（feTurbulence）を CSS の中に埋め込んで重ねるので、画像を読み込まずに済み、ページが軽いままです。
模様の種類（10種類と、模様なしでノイズだけ）、背景色・模様の色、濃さ、間隔、線の太さ、ノイズの濃さと粒の細かさを調整すると、プレビューを見ながら CSS ができあがります。処理はブラウザの中だけで行い、設定がサーバーに送られることはありません。
生成したコードの使い方
- 模様を決める。定番テクスチャ（24種）から近いものを選び、色・間隔・太さ・ノイズを調整します。
- CSS をコピーする。「CSS Code」の Copy ボタンを押し、自分のサイトの CSS に貼り付けます。HTML の追加は必要ありません。
- 模様を付けたい要素に当てる。出力は
.pattern-bgというクラスで書かれています。要素にclass="pattern-bg"を付けるか、ページ全体に敷くならセレクタをbodyに書き換えます。
模様は background-size の大きさで繰り返し敷かれるので、どんな広さの要素にも継ぎ目なく広がります。「PNG保存」でプレビューを画像として書き出すこともできます。
ブラウザ対応
| ブラウザ | 市松模様・ダイヤ柄（repeating-conic-gradient()）に対応したバージョン |
ストライプ（repeating-linear-gradient()）に対応したバージョン |
|---|---|---|
| Chrome・Edge | Chrome 69 以降・Edge 79 以降 | Chrome 26 以降・Edge 12 以降 |
| Safari（Mac・iPhone） | Mac 12.1 以降・iPhone 12.2 以降 | 7 以降 |
| Firefox | 83 以降 | 16 以降 |
出典: MDN の互換性データ（browser-compat-data 8.1.2、2026年9月時点）。いま使われている主なブラウザはすべて対応しています。
よくある質問 (FAQ)
書かなくて大丈夫です。模様もノイズも背景として描くので、CSS だけで完結します。出力は
.pattern-bg のクラスで書かれているので、既存の要素にこのクラスを付けるか、セレクタを body や .box など自分の要素に書き換えてください。
画像ファイルではありません。ノイズは SVG のフィルター
feTurbulence を、data:image/svg+xml の形で CSS の中に直接書いています。別のファイルを読み込まないので、通信が増えません。ノイズの濃さと粒の細かさはスライダーで変えられます。
「サイズ (間隔)」と「太さ (Thickness)」で変えます。サイズは模様1つ分の大きさで、CSS の
background-size に入ります。貼り付けたあとに直すときは、この値と、グラデーションの中の px の値を同じ比率で変えてください。
「パターンの不透明度」を下げて、模様を薄くしてください。背景の模様は、濃いほど上の文字と重なって読みにくくなります。本文の後ろに敷くときは、模様と背景色の差を小さくし、ノイズも控えめにすると読みやすさを保てます。