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

あのー、水玉模様の背景をCSSで作りたいのですがー

なるほどー、できますよー。工夫次第でいろんな背景が作れます。いろんなパターンまとめましたー

背景パターン / 方眼紙 ver.1

See the Pen 【CSS】Background Patterns / Paper by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / 方眼紙 ver.2

See the Pen 【CSS】Background Patterns / Paper（方眼紙その２） by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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);
}

背景パターン / ひし形

See the Pen 【CSS】Background Patterns / Rhombus by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / ジグザグ

See the Pen 【CSS】Background Patterns / ZigZag by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / ジグザグ 3D

See the Pen 【CSS】Background Patterns / ZigZag 3D by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / 月

See the Pen 【CSS】Background Patterns / Moon by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / サークル

※ iOSのSafariだと少し見た目が変わる（改良が必要、宿題）

See the Pen 【CSS】Background Patterns / Circles by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / 波状

※ iOSのSafariだと少し見た目が変わる（改良が必要、宿題）

See the Pen 【CSS】Background Patterns / Wavy by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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 );
}

背景パターン / アイソメトリック

See the Pen 【CSS】Background Patterns / Isometric by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / 水玉模様

See the Pen 【CSS】Background Patterns / Polka by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / 水玉模様 ver.2

See the Pen 【CSS】Background Patterns / Polka v2 by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / ボーダー ver.1

See the Pen 【CSS】Background Patterns / Lines by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / ボーダー ver.2

See the Pen 【CSS】Background Patterns / Lines v3 by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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);
}

背景パターン / ストライプ ver.1

See the Pen 【CSS】Background Patterns / Lines v2 by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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%;
}

背景パターン / ストライプ ver.2

See the Pen 【CSS】Background Patterns / Lines v4 by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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);
}

背景パターン / 斜線

See the Pen 【CSS】Background Patterns / Diagonal by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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 );
}

背景パターン / 斜線 ver.2

See the Pen 【CSS】Background Patterns / Diagonal v2 by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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 );
}

背景パターン / 斜線 ver.3

See the Pen 【CSS】Background Patterns / Diagonal v3 by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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%);
}

背景パターン / 三角形

See the Pen 【CSS】Background Patterns / Triangle by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / 三角形 ver.2

See the Pen 【CSS】Background Patterns / Triangle v2 by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / 三角形 ver.3

See the Pen 【CSS】Background Patterns / Triangle v3 by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / 三角形 ver.4

See the Pen 【CSS】Background Patterns / Triangle v4 by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / ボックス

See the Pen 【CSS】Background Patterns / Boxes by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / レクタングル

See the Pen 【CSS】Background Patterns / Rectangles by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / 十字

See the Pen 【CSS】Background Patterns / Cross by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

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;
}

背景パターン / 王冠

See the Pen 【CSS】Background Patterns / Crown by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<div class="bg_pattern Crown"></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;
}