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

  • 2020.11.1
きのこさん
あのー、水玉模様の背景をCSSで作りたいのですがー
きのこさん
なるほどー、できますよー。工夫次第でいろんな背景が作れます。いろんなパターンまとめましたー

1.背景パターン / 方眼紙 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;
}

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

See the Pen
【CSS】Background Patterns / Paper(方眼紙その2)
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);
}

3.背景パターン / ひし形

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

4.背景パターン / ジグザグ

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

5.背景パターン / ジグザグ 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;
}

6.背景パターン / 月

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

7.背景パターン / サークル

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

8.背景パターン / 波状

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

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

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

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

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

11.背景パターン / 水玉模様 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;
}

12.背景パターン / ボーダー 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;
}

13.背景パターン / ボーダー 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);
}

14.背景パターン / ストライプ 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%;
}

15.背景パターン / ストライプ 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);
}

16.背景パターン / 斜線

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

17.背景パターン / 斜線 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 );
}

18.背景パターン / 斜線 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%);
}

19.背景パターン / 三角形

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

20.背景パターン / 三角形 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;
}

21.背景パターン / 三角形 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;
}

22.背景パターン / 三角形 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;
}

23.背景パターン / ボックス

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

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

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

25.背景パターン / 十字

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

26.背景パターン / 王冠

See the Pen
【CSS】Background Patterns / Crown
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;
}
.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;
}

さいごに

きのこさん
わ、水玉になりましたー
きのこさん
わ、25選って書いたのですが26選ありますねー、わー
デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

アンカー市川|みんなで作る自分の居場所
アンカー市川|みんなで作る自分の居場所
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう