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

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

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.背景パターン / ひし形

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

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

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

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

5.背景パターン / 月

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

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

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

7.背景パターン / 波状

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

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

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

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

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

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

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

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

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

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

15.背景パターン / 斜線

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

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

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

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

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

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

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

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

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

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

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

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

24.背景パターン / 十字

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

25.背景パターン / 王冠

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

さいごに

きのこさん
わ、水玉になりましたー
きのこさん
よかったですー
Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

旅する喫茶 – tabisuru kissa.
旅する喫茶 – tabisuru kissa.
IDÉEさんのソファ
お食い初めとお正月