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

2020.11.1
更新 2026.10.7
デザインのメモ
CSS

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

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

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

コードを見る（HTML・CSS）

HTML

<div class="bg_pattern Paper"></div>

CSS

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Paper {
  background-image:  linear-gradient(#e8dc6a 4px, transparent 4px), linear-gradient(90deg, #e8dc6a 4px, transparent 4px), linear-gradient(#e8dc6a 2px, transparent 2px), linear-gradient(90deg, #e8dc6a 2px, #f3efe6 2px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -4px -4px, -4px -4px, -2px -2px, -2px -2px;
}

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

コードを見る（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);
}

背景パターン / ひし形

コードを見る（HTML・CSS）

HTML

<div class="bg_pattern Rhombus"></div>

CSS

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Rhombus {
  background-image:  linear-gradient(135deg, #e8dc6a 25%, transparent 25%), linear-gradient(225deg, #e8dc6a 25%, transparent 25%), linear-gradient(45deg, #e8dc6a 25%, transparent 25%), linear-gradient(315deg, #e8dc6a 25%, #f3efe6 25%);
  background-position:  20px 0, 20px 0, 0 0, 0 0;
  background-size: 20px 20px;
  background-repeat: repeat;
}

背景パターン / ジグザグ

コードを見る（HTML・CSS）

HTML

<div class="bg_pattern ZigZag"></div>

CSS

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.ZigZag {
  background-image:  linear-gradient(135deg, #e8dc6a 25%, transparent 25%), linear-gradient(225deg, #e8dc6a 25%, transparent 25%), linear-gradient(45deg, #e8dc6a 25%, transparent 25%), linear-gradient(315deg, #e8dc6a 25%, #f3efe6 25%);
  background-position:  20px 0, 20px 0, 0 0, 0 0;
  background-size: 40px 40px;
  background-repeat: repeat;
}

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

コードを見る（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: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.ZigZag_3D {
  background: linear-gradient(135deg, #e8dc6a55 25%, transparent 25%) -20px 0/ 40px 40px, linear-gradient(225deg, #e8dc6a 25%, transparent 25%) -20px 0/ 40px 40px, linear-gradient(315deg, #e8dc6a55 25%, transparent 25%) 0px 0/ 40px 40px, linear-gradient(45deg, #e8dc6a 25%, #f3efe6 25%) 0px 0/ 40px 40px;
}

背景パターン / 月

コードを見る（HTML・CSS）

HTML

<div class="bg_pattern Moon"></div>

CSS

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Moon {
  background-image: radial-gradient( ellipse farthest-corner at 20px 20px , #e8dc6a, #e8dc6a 50%, #f3efe6 50%);
  background-size: 20px 20px;
}

背景パターン / サークル

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

コードを見る（HTML・CSS）

HTML

<div class="bg_pattern Circles"></div>

CSS

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Circles {
  background-image: radial-gradient(circle at center center, #e8dc6a, #f3efe6), repeating-radial-gradient(circle at center center, #e8dc6a, #e8dc6a, 20px, transparent 40px, transparent 20px);
  background-blend-mode: multiply;
}

背景パターン / 波状

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

コードを見る（HTML・CSS）

HTML

<div class="bg_pattern Wavy"></div>

CSS

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Wavy {
  background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #f3efe6 20px ), repeating-linear-gradient( #e8dc6a55, #e8dc6a );
}

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

コードを見る（HTML・CSS）

HTML

<div class="bg_pattern Isometric"></div>

CSS

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Isometric {
  background-image:  linear-gradient(30deg, #e8dc6a 12%, transparent 12.5%, transparent 87%, #e8dc6a 87.5%, #e8dc6a), linear-gradient(150deg, #e8dc6a 12%, transparent 12.5%, transparent 87%, #e8dc6a 87.5%, #e8dc6a), linear-gradient(30deg, #e8dc6a 12%, transparent 12.5%, transparent 87%, #e8dc6a 87.5%, #e8dc6a), linear-gradient(150deg, #e8dc6a 12%, transparent 12.5%, transparent 87%, #e8dc6a 87.5%, #e8dc6a), linear-gradient(60deg, #e8dc6a77 25%, transparent 25.5%, transparent 75%, #e8dc6a77 75%, #e8dc6a77), linear-gradient(60deg, #e8dc6a77 25%, transparent 25.5%, transparent 75%, #e8dc6a77 75%, #e8dc6a77);
  background-size: 40px 70px;
  background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
}

背景パターン / 水玉模様

コードを見る（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(#e8dc6a 2px, #ffffff 2px);
  background-size: 20px 20px;
}

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

コードを見る（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: #ffffff;
  opacity: 0.4;
  z-index: -1;
}
.Polka_v2 {
  background-image:  radial-gradient(#e8dc6a 2px, transparent 2px), radial-gradient(#e8dc6a 2px, #ffffff 2px);
  background-size: 40px 40px;
  background-position: 0 0,20px 20px;
}

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

コードを見る（HTML・CSS）

HTML

<div class="bg_pattern Lines"></div>

CSS

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Lines {
  background-image: linear-gradient(0deg, #f3efe6 50%, #e8dc6a 50%);
background-size: 20px 20px;
}

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

コードを見る（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: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Lines_v3 {
  background-size: 40px 40px;
  background-image:  repeating-linear-gradient(0deg, #e8dc6a, #e8dc6a 2px, #f3efe6 2px, #f3efe6);
}

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

コードを見る（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: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Lines_v2 {
  background-image: linear-gradient(to right, #e8dc6a, #e8dc6a 10px, #f3efe6 10px, #f3efe6 );
  background-size: 20px 100%;
}

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

コードを見る（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: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Lines_v4 {
  background-size: 40px 40px;
  background-image:  repeating-linear-gradient(to right, #e8dc6a, #e8dc6a 2px, #f3efe6 2px, #f3efe6);
}

背景パターン / 斜線

コードを見る（HTML・CSS）

HTML

<div class="bg_pattern Diagonal"></div>

CSS

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Diagonal {
  background: repeating-linear-gradient( 45deg, #e8dc6a, #e8dc6a 10px, #f3efe6 10px, #f3efe6 50px );
}

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

コードを見る（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: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Diagonal_v2 {
  background: repeating-linear-gradient( -45deg, #e8dc6a, #e8dc6a 10px, #f3efe6 10px, #f3efe6 50px );
}

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

コードを見る（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: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Diagonal_v3 {
  background-size: 20px 20px;
  background-image: repeating-linear-gradient(45deg, #e8dc6a 0, #e8dc6a 2px, #f3efe6 0, #f3efe6 50%);
}

背景パターン / 三角形

コードを見る（HTML・CSS）

HTML

<div class="bg_pattern Triangle"></div>

CSS

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Triangle {
  background-image: linear-gradient(45deg, #e8dc6a 50%, #f3efe6 50%);
  background-size: 20px 20px;
}

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

コードを見る（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: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Triangle_v2 {
  background-image: linear-gradient(-45deg, #f3efe6, #f3efe6 50%, #e8dc6a 50%, #e8dc6a);
  background-size: 20px 20px;
}

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

コードを見る（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: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Triangle_v3 {
  background-image: linear-gradient(45deg, #e8dc6a 25%, transparent 25%), linear-gradient(315deg, #e8dc6a 25%, #f3efe6 25%);
  background-position: 0 0, 20px 0, 0 0, 0 0;
  background-size: 20px 20px;
  background-repeat: repeat;
}

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

コードを見る（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: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Triangle_v4 {
  background-image: linear-gradient(135deg, #e8dc6a 25%, transparent 25%), linear-gradient(225deg, #e8dc6a 25%, transparent 25%);
  background-position: 0 0, 20px 0, 0 0, 0 0;
  background-size: 20px 20px;
  background-repeat: repeat;
}

背景パターン / ボックス

コードを見る（HTML・CSS）

HTML

<div class="bg_pattern Boxes"></div>

CSS

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Boxes {
  background-image:  linear-gradient(#e8dc6a 2px, transparent 2px), linear-gradient(to right, #e8dc6a 2px, #f3efe6 2px);
  background-size: 40px 40px;
}

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

コードを見る（HTML・CSS）

HTML

<div class="bg_pattern Rectangles"></div>

CSS

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Rectangles {
  background-image:  repeating-linear-gradient(45deg, #e8dc6a 25%, transparent 25%, transparent 75%, #e8dc6a 75%, #e8dc6a), repeating-linear-gradient(45deg, #e8dc6a 25%, #f3efe6 25%, #f3efe6 75%, #e8dc6a 75%, #e8dc6a);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
}

背景パターン / 十字

コードを見る（HTML・CSS）

HTML

<div class="bg_pattern Cross"></div>

CSS

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Cross {
  background: radial-gradient(circle, transparent 20%, #f3efe6 20%, #f3efe6 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #f3efe6 20%, #f3efe6 80%, transparent 80%, transparent) 50px 50px, linear-gradient(#e8dc6a 4px, transparent 4px) 0 -2px, linear-gradient(90deg, #e8dc6a 4px, #f3efe6 4px) -2px 0;
background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
}

背景パターン / 王冠

コードを見る（HTML・CSS）

HTML

<div class="bg_pattern Crown"></div>

CSS

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f3efe6;
  opacity: 0.4;
  z-index: -1;
}
.Crown {
  background-image: linear-gradient(45deg, #e8dc6a 25%, transparent 25%), linear-gradient(315deg, #e8dc6a 25%, #f3efe6 25%);
  background-position: 10px 0, 20px 0, 0 0, 0 0;
  background-size: 20px 20px;
  background-repeat: repeat;
}