本文へスキップ
  1. Web BENTO CSS
  2. カテゴリ一覧
  3. 背景パターン
12 / PATTERN 12 パーツ

CSS背景パターン 12選

コピペで使えるおしゃれなCSS背景パターンのサンプル集。ドット・ストライプ・格子など、画像を使わずCSSグラデーションだけで描く軽量な背景を集めました。シャッフルで色と間隔のバリエーションを試せて、表示中のプレビューとコードは常に一致します。クラス名は .bnto-bg-dots 形式です。

該当するパーツが見つかりませんでした。

ドット（水玉）

.bnto-bg-dots {
  background-color: #fff;
  background-image: radial-gradient(hsl(5 80% 60% / 0.25) 3px, transparent 3px);
  background-size: 22px 22px;
}
使い方のコツ

3px がドットの半径、background-size がドット同士の間隔です。粒を大きくしたら間隔も一緒に広げるとバランスが保てます。ずらして重ねる千鳥配置にしたいときは同じグラデを2枚重ねて background-position を半分ずらします。

グリッド線

.bnto-bg-grid {
  background-color: #fff;
  background-image:
    linear-gradient(hsl(202 70% 55% / 0.18) 1.5px, transparent 1.5px),
    linear-gradient(90deg, hsl(202 70% 55% / 0.18) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}
使い方のコツ

横線と縦線（90deg）の2枚のグラデを重ねて格子を作っています。1.5px が線の太さ、background-size がマス目の大きさ。テック系・設計図風のヒーロー背景と相性抜群です。

斜めストライプ

.bnto-bg-stripes {
  background-color: #fff;
  background-image: repeating-linear-gradient(45deg,
    hsl(43 90% 55% / 0.22) 0 10px, transparent 10px 24px);
}
使い方のコツ

数値の読み方は 色 0 10px＝0〜10pxが色の帯、transparent 10px 24px＝10〜24pxが透明。この差で帯の太さと間隔が決まります。角度を変えると縞の向きが変わります。

市松（チェック柄）

.bnto-bg-checker {
  background-color: #fff;
  background-image: conic-gradient(
    hsl(150 45% 50% / 0.15) 25%, transparent 25% 50%,
    hsl(150 45% 50% / 0.15) 50% 75%, transparent 75%);
  background-size: 32px 32px;
}
使い方のコツ

conic-gradient なら1枚で市松模様が作れます。background-size は「2マス×2マス」の大きさなので、1マスはその半分。薄い色にすると上にテキストを乗せても読みやすい背景になります。

方眼紙

.bnto-bg-graph {
  background-color: #fff;
  background-image:
    linear-gradient(hsl(322 55% 60% / 0.15) 1px, transparent 1px),
    linear-gradient(90deg, hsl(322 55% 60% / 0.15) 1px, transparent 1px);
  background-size: 12px 12px;
}
使い方のコツ

グリッド線を細く（1px）小さくしたノート風のパターン。手書き風・文房具系のデザインに合います。罫線の濃さは色の / 0.15 の部分で調整してください。

斜めヘアライン

.bnto-bg-diagonal {
  background-color: #fff;
  background-image: repeating-linear-gradient(45deg,
    hsl(258 50% 60% / 0.25) 0 1.5px, transparent 1.5px 12px);
}
使い方のコツ

1.5pxの極細ラインは主張が少なく、どんなサイトにもなじむ万能パターン。「準備中」「非活性」エリアの表現や、図の網掛け（ハッチング）にもよく使われます。

クロスハッチ

.bnto-bg-crosshatch {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(45deg, hsl(216 60% 55% / 0.18) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, hsl(216 60% 55% / 0.18) 0 1px, transparent 1px 12px);
}
使い方のコツ

45degと-45degの斜線を2枚重ねて網目にしています。半透明色を使うと交差した部分が自然に濃くなり、手描きのような奥行きが出ます。

三角モザイク

.bnto-bg-triangle {
  background-color: #fff;
  background-image:
    linear-gradient(135deg, hsl(122 40% 50% / 0.16) 25%, transparent 25%),
    linear-gradient(225deg, hsl(122 40% 50% / 0.16) 25%, transparent 25%);
  background-size: 20px 20px;
}
使い方のコツ

135degと225degのグラデを重ねると三角形が並ぶうろこ模様に。和柄・ポップ系どちらにも寄せられます。2枚の色を少し変えると立体感のあるヘリンボーン風になります。

縦ストライプ

.bnto-bg-vstripe {
  background-color: #fff;
  background-image: repeating-linear-gradient(90deg,
    hsl(41 90% 55% / 0.2) 0 3px, transparent 3px 16px);
}
使い方のコツ

細い縦縞（ピンストライプ）はきちんと感が出るパターン。3px が線の太さ、末尾の 16px が繰り返し1周期の幅です。線を太くするなら間隔も広げましょう。

ボーダー（横縞）

.bnto-bg-border {
  background-color: #fff;
  background-image: repeating-linear-gradient(0deg,
    hsl(197 70% 60% / 0.16) 0 12px, transparent 12px 26px);
}
使い方のコツ

マリンテイストやナチュラル系サイトの定番、横縞ボーダー。0 12px が帯の太さです。帯と余白を同じ幅（例: 0 13px / 13px 26px）にすると等幅ボーダーになります。

紙ノイズ風

/* 細かいドット2層で紙の質感を再現 */
.bnto-bg-noise {
  background-color: #FDFBF7;
  background-image:
    radial-gradient(hsl(35 25% 60% / 0.18) 1px, transparent 1px),
    radial-gradient(hsl(35 20% 50% / 0.12) 1px, transparent 1px);
  background-size: 11px 11px, 17px 17px;
  background-position: 0 0, 6px 8px;
}
使い方のコツ

background-size を 11px と 17px のように割り切れない組み合わせにするのがポイント。周期がずれて規則性が目立たなくなり、ざらっとした紙の質感に見えます。

グラフ用紙

/* 太線（50px間隔）+ 細線（10px間隔）の二重グリッド */
.bnto-bg-graphpaper {
  background-color: #fff;
  background-image:
    linear-gradient(hsl(174 45% 45% / 0.3) 1px, transparent 1px),
    linear-gradient(90deg, hsl(174 45% 45% / 0.3) 1px, transparent 1px),
    linear-gradient(hsl(174 45% 45% / 0.12) 1px, transparent 1px),
    linear-gradient(90deg, hsl(174 45% 45% / 0.12) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
}
使い方のコツ

濃い線と薄い線の2種類の格子を重ねた本格グラフ用紙。太線の間隔（50px）は細線（10px）の整数倍にするのが崩れないコツです。マス目を変えるときは倍数関係を保ってください。

CSS背景パターンの基礎知識

セクションの背景やヒーローエリアにパターンを敷くと、ページの情報量を増やさずに雰囲気だけを豊かにできます。このページでは「CSS 背景パターン コピペ」で探している方がそのまま使えるよう、画像を一切使わないピュアCSSのパターンを12種類掲載しました。仕組みはシンプルで、radial-gradient（ドット）、repeating-linear-gradient（ストライプ）、conic-gradient（市松）などを background-image に指定し、background-size で小さなタイルとして敷き詰めているだけです。

画像を使わない最大の利点は軽さと鮮明さ。HTTPリクエストが発生せず読み込みは一瞬、しかもグラデーションはベクター的に描画されるため、Retinaなど高解像度ディスプレイでも一切ぼやけません。色替えもコード内のhsl値を書き換えるだけです。

repeating-linear-gradientとbackground-sizeの関係

ストライプ背景をCSSで作るなら repeating-linear-gradient(45deg, 色 0 10px, transparent 10px 24px) の形が基本。「0〜10pxが色の帯、10〜24pxが透明」という指定が無限に繰り返されます。一方ドットや格子は繰り返し機能を持たないため、background-size でタイル1枚の大きさを決めて敷き詰めます。この2つの仕組みを覚えれば大半のパターンは自作できます。

コンテンツを邪魔しない濃度（不透明度）の目安

背景パターンは主役ではなく脇役。色に hsl(210 70% 50% / 0.1) のように不透明度を付け、テキストが乗るなら0.06〜0.15、装飾エリアなら0.2〜0.3程度に抑えるのが読みやすさの目安です。濃いと感じたらまずalpha値を下げてみてください。

セクション背景としての使い方

使い方はHTMLタブの通り、パターン用クラスを付けた要素の中にコンテンツを入れるだけ。body に付けてページ全体に敷く、交互のセクションだけに敷いてリズムを作る、といった使い方も定番です。

よくある質問

背景パターンは画像を使わずに本当に表示できますか？
はい。すべて radial-gradient や repeating-linear-gradient などCSSのグラデーション機能だけで描画しています。画像の読み込みが発生しないため表示が速く、Retinaなど高解像度ディスプレイでもぼやけません。
パターンの色や間隔を変更するには？
background-image 内の色（hsl値）と background-size の数値を書き換えるだけです。各カードの「シャッフル」ボタンを押すと色と間隔の組み合わせをその場で試せて、コードも自動で書き換わります。
パターンが濃くて文字が読みにくいときは？
色のhsl値に付いている不透明度（/ 0.15 など）を小さくしてください。テキストを重ねるセクション背景なら 0.06〜0.15 程度が読みやすさの目安です。
商用サイトで利用できますか？
はい、すべてのパーツは商用・個人を問わず無料で利用できます。登録やクレジット表記も不要です。
このページのパーツはAIコーディングツールでも使えますか？
はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「グリッド線」）を伝えるだけで適用を指示できます。AIがWebを読めない場合は、「コピー」ボタンで取得したHTMLとCSSをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に表示確認することをおすすめします。

関連カテゴリ

背景パターンと組み合わせて使いやすいパーツはこちら。

グラデーション 区切り線 影・グラス カード装飾