【CSS】使える背景パターン、実装サンプル25選(コピペで簡単です)
- 2020.11.1
- CSS



もくじ
- 背景パターン / 方眼紙 ver.1
- 背景パターン / 方眼紙 ver.2
- 背景パターン / ひし形
- 背景パターン / ジグザグ
- 背景パターン / ジグザグ 3D
- 背景パターン / 月
- 背景パターン / サークル
- 背景パターン / 波状
- 背景パターン / アイソメトリック
- 背景パターン / 水玉模様 ver.1
- 背景パターン / 水玉模様 ver.2
- 背景パターン / ボーダー ver.1
- 背景パターン / ボーダー ver.2
- 背景パターン / ストライプ ver.1
- 背景パターン / ストライプ ver.2
- 背景パターン / 斜線 ver.1
- 背景パターン / 斜線 ver.2
- 背景パターン / 斜線 ver.3
- 背景パターン / 三角形 ver.1
- 背景パターン / 三角形 ver.2
- 背景パターン / 三角形 ver.3
- 背景パターン / 三角形 ver.4
- 背景パターン / ボックス
- 背景パターン / レクタングル
- 背景パターン / 十字
- 背景パターン / 王冠
- さいごに
1.背景パターン / 方眼紙 ver.1
See the Pen
【CSS】Background Patterns / Paper by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Paper"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Paper { background-image: linear-gradient(#ffc107 4px, transparent 4px), linear-gradient(90deg, #ffc107 4px, transparent 4px), linear-gradient(#ffc107 2px, transparent 2px), linear-gradient(90deg, #ffc107 2px, #ffe9a7 2px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position: -4px -4px, -4px -4px, -2px -2px, -2px -2px; }
2.背景パターン / 方眼紙 ver.2
See the Pen
【CSS】Background Patterns / Paper(方眼紙その2) by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Paper_v2"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #fff; z-index: -1; } .Paper_v2 { background-image: repeating-linear-gradient(to bottom, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px, transparent 79px, transparent 103px, rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px, transparent 105px, transparent 129px, rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px), repeating-linear-gradient(to right, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px, transparent 79px, transparent 103px, rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px, transparent 105px, transparent 129px, rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px); }
3.背景パターン / ひし形
See the Pen
【CSS】Background Patterns / Rhombus by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Rhombus"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Rhombus { background-image: linear-gradient(135deg, #ffc107 25%, transparent 25%), linear-gradient(225deg, #ffc107 25%, transparent 25%), linear-gradient(45deg, #ffc107 25%, transparent 25%), linear-gradient(315deg, #ffc107 25%, #ffe9a7 25%); background-position: 20px 0, 20px 0, 0 0, 0 0; background-size: 20px 20px; background-repeat: repeat; }
4.背景パターン / ジグザグ
See the Pen
【CSS】Background Patterns / ZigZag by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern ZigZag"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .ZigZag { background-image: linear-gradient(135deg, #ffc107 25%, transparent 25%), linear-gradient(225deg, #ffc107 25%, transparent 25%), linear-gradient(45deg, #ffc107 25%, transparent 25%), linear-gradient(315deg, #ffc107 25%, #ffe9a7 25%); background-position: 20px 0, 20px 0, 0 0, 0 0; background-size: 40px 40px; background-repeat: repeat; }
5.背景パターン / ジグザグ 3D
See the Pen
【CSS】Background Patterns / ZigZag 3D by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern ZigZag_3D"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .ZigZag_3D { background: linear-gradient(135deg, #ffc10755 25%, transparent 25%) -20px 0/ 40px 40px, linear-gradient(225deg, #ffc107 25%, transparent 25%) -20px 0/ 40px 40px, linear-gradient(315deg, #ffc10755 25%, transparent 25%) 0px 0/ 40px 40px, linear-gradient(45deg, #ffc107 25%, #ffe9a7 25%) 0px 0/ 40px 40px; }
6.背景パターン / 月
See the Pen
【CSS】Background Patterns / Moon by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Moon"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Moon { background-image: radial-gradient( ellipse farthest-corner at 20px 20px , #ffc107, #ffc107 50%, #ffe9a7 50%); background-size: 20px 20px; }
7.背景パターン / サークル
※ iOSのSafariだと少し見た目が変わる(改良が必要、宿題)
See the Pen
【CSS】Background Patterns / Circles by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Circles"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Circles { background-image: radial-gradient(circle at center center, #ffc107, #ffe9a7), repeating-radial-gradient(circle at center center, #ffc107, #ffc107, 20px, transparent 40px, transparent 20px); background-blend-mode: multiply; }
8.背景パターン / 波状
※ iOSのSafariだと少し見た目が変わる(改良が必要、宿題)
See the Pen
【CSS】Background Patterns / Wavy by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Wavy"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Wavy { background-image: repeating-radial-gradient( circle at 0 0, transparent 0, #ffe9a7 20px ), repeating-linear-gradient( #ffc10755, #ffc107 ); }
9.背景パターン / アイソメトリック
See the Pen
【CSS】Background Patterns / Isometric by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Isometric"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Isometric { background-image: linear-gradient(30deg, #ffc107 12%, transparent 12.5%, transparent 87%, #ffc107 87.5%, #ffc107), linear-gradient(150deg, #ffc107 12%, transparent 12.5%, transparent 87%, #ffc107 87.5%, #ffc107), linear-gradient(30deg, #ffc107 12%, transparent 12.5%, transparent 87%, #ffc107 87.5%, #ffc107), linear-gradient(150deg, #ffc107 12%, transparent 12.5%, transparent 87%, #ffc107 87.5%, #ffc107), linear-gradient(60deg, #ffc10777 25%, transparent 25.5%, transparent 75%, #ffc10777 75%, #ffc10777), linear-gradient(60deg, #ffc10777 25%, transparent 25.5%, transparent 75%, #ffc10777 75%, #ffc10777); background-size: 40px 70px; background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px; }
10.背景パターン / 水玉模様
See the Pen
【CSS】Background Patterns / Polka by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Polka"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffffff; opacity: 0.4; z-index: -1; } .Polka { background-image: radial-gradient(#ffc107 2px, #ffffff 2px); background-size: 20px 20px; }
11.背景パターン / 水玉模様 ver.2
See the Pen
【CSS】Background Patterns / Polka v2 by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Polka_v2"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #fffff; opacity: 0.4; z-index: -1; } .Polka_v2 { background-image: radial-gradient(#ffc107 2px, transparent 2px), radial-gradient(#ffc107 2px, #ffffff 2px); background-size: 40px 40px; background-position: 0 0,20px 20px; }
12.背景パターン / ボーダー ver.1
See the Pen
【CSS】Background Patterns / Lines by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Lines"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Lines { background-image: linear-gradient(0deg, #ffe9a7 50%, #ffc107 50%); background-size: 20px 20px; }
13.背景パターン / ボーダー ver.2
See the Pen
【CSS】Background Patterns / Lines v3 by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Lines_v3"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Lines_v3 { background-size: 40px 40px; background-image: repeating-linear-gradient(0deg, #ffc107, #ffc107 2px, #ffe9a7 2px, #ffe9a7); }
14.背景パターン / ストライプ ver.1
See the Pen
【CSS】Background Patterns / Lines v2 by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Lines_v2"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Lines_v2 { background-image: linear-gradient(to right, #ffc107, #ffc107 10px, #ffe9a7 10px, #ffe9a7 ); background-size: 20px 100%; }
15.背景パターン / ストライプ ver.2
See the Pen
【CSS】Background Patterns / Lines v4 by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Lines_v4"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Lines_v4 { background-size: 40px 40px; background-image: repeating-linear-gradient(to right, #ffc107, #ffc107 2px, #ffe9a7 2px, #ffe9a7); }
16.背景パターン / 斜線
See the Pen
【CSS】Background Patterns / Diagonal by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Diagonal"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Diagonal { background: repeating-linear-gradient( 45deg, #ffc107, #ffc107 10px, #ffe9a7 10px, #ffe9a7 50px ); }
17.背景パターン / 斜線 ver.2
See the Pen
【CSS】Background Patterns / Diagonal v2 by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Diagonal_v2"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Diagonal_v2 { background: repeating-linear-gradient( -45deg, #ffc107, #ffc107 10px, #ffe9a7 10px, #ffe9a7 50px ); }
18.背景パターン / 斜線 ver.3
See the Pen
【CSS】Background Patterns / Diagonal v3 by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Diagonal_v3"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Diagonal_v3 { background-size: 20px 20px; background-image: repeating-linear-gradient(45deg, #ffc107 0, #ffc107 2px, #ffe9a7 0, #ffe9a7 50%); }
19.背景パターン / 三角形
See the Pen
【CSS】Background Patterns / Triangle by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Triangle"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Triangle { background-image: linear-gradient(45deg, #ffc107 50%, #ffe9a7 50%); background-size: 20px 20px; }
20.背景パターン / 三角形 ver.2
See the Pen
【CSS】Background Patterns / Triangle v2 by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Triangle_v2"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Triangle_v2 { background-image: linear-gradient(-45deg, #ffe9a7, #ffe9a7 50%, #ffc107 50%, #ffc107); background-size: 20px 20px; }
21.背景パターン / 三角形 ver.3
See the Pen
【CSS】Background Patterns / Triangle v3 by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Triangle_v3"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Triangle_v3 { background-image: linear-gradient(45deg, #ffc107 25%, transparent 25%), linear-gradient(315deg, #ffc107 25%, #ffe9a7 25%); background-position: 0 0, 20px 0, 0 0, 0 0; background-size: 20px 20px; background-repeat: repeat; }
22.背景パターン / 三角形 ver.4
See the Pen
【CSS】Background Patterns / Triangle v4 by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Triangle_v4"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Triangle_v4 { background-image: linear-gradient(135deg, #ffc107 25%, transparent 25%), linear-gradient(225deg, #ffc107 25%, transparent 25%); background-position: 0 0, 20px 0, 0 0, 0 0; background-size: 20px 20px; background-repeat: repeat; }
23.背景パターン / ボックス
See the Pen
【CSS】Background Patterns / Boxes by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Boxes"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Boxes { background-image: linear-gradient(#ffc107 2px, transparent 2px), linear-gradient(to right, #ffc107 2px, #ffe9a7 2px); background-size: 40px 40px; }
24.背景パターン / レクタングル
See the Pen
【CSS】Background Patterns / Rectangles by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Rectangles"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Rectangles { background-image: repeating-linear-gradient(45deg, #ffc107 25%, transparent 25%, transparent 75%, #ffc107 75%, #ffc107), repeating-linear-gradient(45deg, #ffc107 25%, #ffe9a7 25%, #ffe9a7 75%, #ffc107 75%, #ffc107); background-position: 0 0, 20px 20px; background-size: 40px 40px; }
25.背景パターン / 十字
See the Pen
【CSS】Background Patterns / Cross by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Cross"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Cross { background: radial-gradient(circle, transparent 20%, #ffe9a7 20%, #ffe9a7 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #ffe9a7 20%, #ffe9a7 80%, transparent 80%, transparent) 50px 50px, linear-gradient(#ffc107 4px, transparent 4px) 0 -2px, linear-gradient(90deg, #ffc107 4px, #ffe9a7 4px) -2px 0; background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px; }
26.背景パターン / 王冠
See the Pen
【CSS】Background Patterns / Crown by 125naroom (@125naroom)
on CodePen.
HTML
<div class="bg_pattern Cross"></div>
CSS
.bg_pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffe9a7; opacity: 0.4; z-index: -1; } .Crown { background-image: linear-gradient(45deg, #ffc107 25%, transparent 25%), linear-gradient(315deg, #ffc107 25%, #ffe9a7 25%); background-position: 10px 0, 20px 0, 0 0, 0 0; background-size: 20px 20px; background-repeat: repeat; }
さいごに


おすすめ
かんれん
- web / 2019.4.18
- 【CSS】css-doodle を使って雨を降らせてみる
- web / 2018.9.14
- 【CSS】Flexbox 上下中央揃え
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.06.05New
- NEWTOWN/グラフィック・Webデザイン
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.04.25
- 【CSS】見出しデザインをまとめてみる(左右に線を引くとか)
- 見出しのデザインをまとめてくださーい わ、わかりましたー もくじ 左右に線を引く 左…
- 125naroom / デザインするところ(会社)です。