モダン・パターンの背景デザイン集 | かわいいフリー素材-ぱたぱたアニメ館

すでに画像素材として「モダン・パターン」を公開していますが、新たにカスタマイズ自由な CSS 版のコードも掲載しました。

どんなコンテンツにも馴染みやすい、シンプルで使い勝手の良いモダン・パターン 14 種類の背景 CSS コードです。目を凝らさないと気づかないほど淡い光や、繊細なグラデーションを忍ばせた、奥行きのあるデザインが特徴です。気に入ったデザインがあれば、コードをコピーして Web ページの背景などにご利用ください。

デモ：ウォーム・リネン

WARM-LINEN-GRID

HTML （クリックで表示）


<div class="warm-linen-grid">
  ここに中身（テキストや画像）を入れます
</div>

CSS （クリックで表示）


.warm-linen-grid {
  width: 100%;     /* 任意の幅 */
  height: 300px;   /* 任意の高さ */

  /* デザインの本体 */
  background-color: #fdfaf5;
  background-image:
    linear-gradient(90deg, rgba(180, 160, 140, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(180, 160, 140, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5), transparent);
  background-size: 8px 8px, 8px 8px, 100% 100%;
}

デモ：ソフト・アクア

SOFT-AQUA-CANVAS

HTML （クリックで表示）


<div class="soft-aqua-canvas">
  ここに中身（テキストや画像）を入れます
</div>

CSS （クリックで表示）


.soft-aqua-canvas {
  width: 100%;     /* 任意の幅 */
  height: 300px;   /* 任意の高さ */

  /* デザインの本体 */
  background-color: #b0d4de; 
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.4), transparent 75%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
}

デモ：ミスティー・キャンバス

MISTY-BLUE-CANVAS

HTML （クリックで表示）


<div class="misty-blue-canvas">
  ここに中身（テキストや画像）を入れます
</div>

CSS （クリックで表示）


.misty-blue-canvas {
  width: 100%;     /* 任意の幅 */
  height: 300px;   /* 任意の高さ */

  /* デザインの本体 */
  background-color: #a3b8c8;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.4), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(180, 210, 230, 0.5), transparent 50%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 2px, transparent 2px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.05) 2px, transparent 2px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  backdrop-filter: contrast(90%) brightness(110%);
}

デモ：セージ・グリッド

SAGE-SOFT-GRID

HTML （クリックで表示）


<div class="sage-soft-grid">
  ここに中身（テキストや画像）を入れます
</div>

CSS （クリックで表示）


.sage-soft-grid {
  width: 100%;     /* 任意の幅 */
  height: 300px;   /* 任意の高さ */

  /* デザインの本体 */
  background-color: #b2bcaf;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 30% 20%, rgba(255, 250, 200, 0.1), transparent 80%);
  background-size: 12px 12px, 12px 12px, 100% 100%;
}

デモ：テック・メッシュ

TECH-BLUE-MESH

HTML （クリックで表示）


<div class="tech-blue-mesh">
  ここに中身（テキストや画像）を入れます
</div>

CSS （クリックで表示）


.tech-blue-mesh {
  width: 100%;     /* 任意の幅 */
  height: 300px;   /* 任意の高さ */

  /* デザインの本体 */
  background-color: #a3b8c8;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    radial-gradient(circle at center, transparent 30%, rgba(0, 40, 80, 0.05));
  background-size: 16px 16px, 16px 16px, 100% 100%;
}

デモ：和紙・クロス

WASHI-CROSS

HTML （クリックで表示）


<div class="washi-cross">
  ここに中身（テキストや画像）を入れます
</div>

CSS （クリックで表示）


.washi-cross {
  width: 100%;     /* 任意の幅 */
  height: 300px;   /* 任意の高さ */

  /* デザインの本体 */
  background-color: #f7f3ed;
  background-image: 
    linear-gradient(rgba(150, 100, 50, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 100, 50, 0.03) 1px, transparent 1px);
  background-size: 4px 4px;
}

デモ：ヘビー・ウィーブ

HEAVY-FABRIC-WEAVE

HTML （クリックで表示）


<div class="heavy-fabric-weave">
  ここに中身（テキストや画像）を入れます
</div>

CSS （クリックで表示）


.heavy-fabric-weave {
  width: 100%;     /* 任意の幅 */
  height: 300px;   /* 任意の高さ */

  /* デザインの本体 */
  background-color: #e6e0d4;
  background-image:
    linear-gradient(90deg, rgba(100,80,60,0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(100,80,60,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.1) 2px, transparent 2px),
    linear-gradient(0deg, rgba(255,255,255,0.1) 2px, transparent 2px);
  background-size: 4px 4px, 4px 4px, 7px 7px, 7px 7px;
  background-position: 0 0, 0 0, 1px 1px, 1px 1px;
}

デモ：ファイン・グレイン

FINE-GRAIN-PAPER

HTML （クリックで表示）


<div class="fine-grain-paper">
  ここに中身（テキストや画像）を入れます
</div>

CSS （クリックで表示）


.fine-grain-paper {
  width: 100%;     /* 任意の幅 */
  height: 300px;   /* 任意の高さ */

  /* デザインの本体 */
  background-color: #f4f1ea;
  background-image: 
    radial-gradient(rgba(0,0,0,0.05) 1px, transparent 0),
    radial-gradient(rgba(0,0,0,0.05) 1px, transparent 0);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 1px;
}

デモ：アンバー・ドット

AMBER-LUXURY-DOT

HTML （クリックで表示）


<div class="amber-luxury-dot">
  ここに中身（テキストや画像）を入れます
</div>

CSS （クリックで表示）


.amber-luxury-dot {
  width: 100%;     /* 任意の幅 */
  height: 300px;   /* 任意の高さ */

  /* デザインの本体 */
  background-color: #3d2b1f;
  background-image:
    radial-gradient(circle at 80% 0%, rgba(255, 180, 100, 0.08), transparent 50%),
    radial-gradient(rgba(212, 175, 55, 0.2) 0.5px, rgba(212, 175, 55, 0.1) 1.5px, transparent 2px);
  background-size: 100% 100%, 25px 25px;
}

デモ：エンバー・グロウ

DEEP-EMBERS-GLOW

HTML （クリックで表示）


<div class="deep-embers-glow">
  ここに中身（テキストや画像）を入れます
</div>

CSS （クリックで表示）


.deep-embers-glow {
  width: 100%;     /* 任意の幅 */
  height: 300px;   /* 任意の高さ */

  /* デザインの本体 */
  background-color: #1e140f;
  background-image:
    radial-gradient(circle at center, rgba(255, 120, 50, 0.12) 0%, transparent 70%),
    radial-gradient(rgba(255, 180, 50, 0.2) 0px, rgba(255, 100, 0, 0.05) 1.5px, transparent 3px);
  background-size: 100% 100%, 32px 32px;
}

デモ：ウッド・スリット

WOODY-SLAT-SHADOW

HTML （クリックで表示）


<div class="woody-slat-shadow">
  ここに中身（テキストや画像）を入れます
</div>

CSS （クリックで表示）


.woody-slat-shadow {
  width: 100%;     /* 任意の幅 */
  height: 300px;   /* 任意の高さ */

  /* デザインの本体 */
  background-color: #2a1d15;
  background-image: 
    linear-gradient(90deg, rgba(255, 180, 50, 0.05) 10%, transparent 10%);
  background-size: 40px 2px;
  background-position: 0 0;
}

デモ：ネオン・パルス

NEON-PULSE-DARK

HTML （クリックで表示）


<div class="neon-pulse-dark">
  ここに中身（テキストや画像）を入れます
</div>

CSS （クリックで表示）


.neon-pulse-dark {
  width: 100%;     /* 任意の幅 */
  height: 300px;   /* 任意の高さ */

  /* デザインの本体 */
  background-color: #1a0b16;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 0, 100, 0.2) 0%, transparent 80%),
    radial-gradient(circle at 80% 70%, rgba(0, 200, 255, 0.2) 0%, transparent 80%),
    radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 3px),
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.02));
  background-size: 100% 100%, 100% 100%, 25px 25px, 100% 4px, 3px 100%;
}

デモ：レトロ・マトリクス

RETRO-MATRIX-DOT

HTML （クリックで表示）


<div class="retro-matrix-dot">
  ここに中身（テキストや画像）を入れます
</div>

CSS （クリックで表示）


.retro-matrix-dot {
  width: 100%;     /* 任意の幅 */
  height: 300px;   /* 任意の高さ */

  /* デザインの本体 */
  background-color: #000;
  background-image: radial-gradient(#0f0 1px, transparent 1px);
  background-size: 30px 30px;
}

デモ：ディープシー・ターミナル

DEEP-SEA-TERMINAL

HTML （クリックで表示）


<div class="deep-sea-terminal">
  ここに中身（テキストや画像）を入れます
</div>

CSS （クリックで表示）


.deep-sea-terminal {
  width: 100%;     /* 任意の幅 */
  height: 300px;   /* 任意の高さ */

  /* デザインの本体 */
  background-color: #05050a;
  background-image: 
    radial-gradient(hsla(180, 100%, 50%, 0.4) 1.5px, transparent 1.5px),
    radial-gradient(hsla(180, 100%, 50%, 0.2) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,0,0,0.1) 50%, transparent 50%);
  background-size: 30px 30px, 12px 12px, 100% 4px;
  background-position: 0 0, 0 0, 0 0;
  filter: drop-shadow(0 0 1px hsla(180, 100%, 50%, 0.5)) contrast(120%);
}

カスタマイズ

＜高さの調整について＞

画面全体を背景にしたい場合：: 背景コードを body に記述してください。height の値に関わらず、ブラウザの仕様で画面下まで背景が広がります。（ただし、スクロール時の安全のために「min-height: 100vh;」を推奨します）
背景を途中の高さで止めたい場合：: body ではなく、特定の div クラスに背景コードを記述し、その div に「height: 50vh;」などを指定してください。

＜`body` 書き換え用テンプレート＞

サンプルとして『 1. ウォーム・リネン』を body 用に書き換えました。参考になさってください。

「width: 100%;」と「height: 300px;」を消す
「margin: 0;」と「min-height: 100vh;」を追加
スクロールしても背景を固定したい場合は、「background-attachment: fixed;」を追加


body {
  margin: 0;
  /* 画面全体をキャンバスにする */
  min-height: 100vh;
  
  /* デザインの本体 */
  background-color: #fdfaf5;
  background-image:
    linear-gradient(90deg, rgba(180, 160, 140, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(180, 160, 140, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5), transparent);
  background-size: 8px 8px, 8px 8px, 100% 100%;
  
  /* スクロールしても背景を固定する */
  background-attachment: fixed;
}

＜各クラス名とカラーコード＞

名前	クラス名	ベースカラー (HEX)	主なアクセント・模様の色 (RGBA/HSLA)	雰囲気
ウォーム・リネン	`.warm-linen-grid`	#fdfaf5	茶系 (180, 160, 140, 0.05)	温かい布の質感
ソフト・アクア	`.soft-aqua-canvas`	#b0d4de	白系 (255, 255, 255, 0.2~0.4)	爽やかな水面
ミスティー・キャンバス	`.misty-blue-canvas`	#a3b8c8	白 / 水色系 (180, 210, 230, 0.5)	霞んだ青空
セージ・グリッド	`.sage-soft-grid`	#b2bcaf	白 / 薄黄系 (255, 250, 200, 0.1)	穏やかな薄緑
テック・メッシュ	`.tech-blue-mesh`	#a3b8c8	白 / 濃紺系 (0, 40, 80, 0.05)	洗練されたIT感
和紙・クロス	`.washi-cross`	#f7f3ed	茶系 (150, 100, 50, 0.03)	和紙・生成り
ヘビー・ウィーブ	`.heavy-fabric-weave`	#e6e0d4	茶系 (100, 80, 60, 0.07)	厚手の布地
ファイン・グレイン	`.fine-grain-paper`	#f4f1ea	黒系 (0, 0, 0, 0.05)	上質な紙の粒子
アンバー・ドット	`.amber-luxury-dot`	#3d2b1f	琥珀 (255, 180, 100) / 金 (212, 175, 55)	琥珀と金の輝き
エンバー・グロウ	`.deep-embers-glow`	#1e140f	暖炉の火 (255, 120, 50 / 255, 180, 50)	暖炉の残り火
ウッド・スリット	`.woody-slat-shadow`	#2a1d15	オレンジ・木目 (255, 180, 50, 0.05)	木目の縦ライン
ネオン・パルス	`.neon-pulse-dark`	#1a0b16	ピンク (255, 0, 100) / 水色 (0, 200, 255)	躍動する夜の光
レトロ・マトリクス	`.retro-matrix-dot`	#000000	緑 (#0f0)	マトリックス
ディープシー・ターミナル	`.deep-sea-terminal`	#05050a	シアン (hsla 180, 100%, 50%)	深海のブルー

★ このページのコードは、Gemini の協力のもと、主に私自身の学習・備忘録（メモ）用として作成しています。複雑な機能や処理を含む部分については、公開前に私自身が入念な動作確認をしていますが、ご利用の際は、必ずご自身で動作確認と必要に応じた修正をお願いいたします。

デモ：ウォーム・リネン

デモ：ソフト・アクア

デモ：ミスティー・キャンバス

デモ：セージ・グリッド

デモ：テック・メッシュ

デモ：和紙・クロス

デモ：ヘビー・ウィーブ

デモ：ファイン・グレイン

デモ：アンバー・ドット

デモ：エンバー・グロウ

デモ：ウッド・スリット

デモ：ネオン・パルス

デモ：レトロ・マトリクス

デモ：ディープシー・ターミナル

カスタマイズ

＜高さの調整について＞

＜body 書き換え用テンプレート＞

＜各クラス名とカラーコード＞

＜`body` 書き換え用テンプレート＞