コピペでできる！cssとhtmlのみで作るちょっと複雑なの背景パターン 12選

CSS HTML
 2018.08.20

画像なしでもちょっとした柄ならもうcssで再現できちゃいますよね。
以前は基本的なボーダーやストライプをご紹介しましたが、今回はちょっとクセ強めです。
アイディア次第で複雑な柄も作れます。どっかで見たチェックやシャツの柄のようなちょっとだけ複雑なパターンをご紹介します。
わかりやすいようにベンダープレフィックスはつけていませんので、必要に応じてつけてください。

基本的なパターンはこちら

copypet.jp

コピペでできる！cssとhtmlのみで作るいい感じの背景パターン 12選

画像なしでもちょっとした柄ならもうcssで再現できちゃいますよね。 アイディア次第で複雑な柄も作れますが、ここでは基本的なパターンをご紹介します。 全面背景はもちろん、ブロック要素や見出しの背景にも使えるよう、色の差を少なめにしています。 また、わかりやすいようにベンダープレフィックスはつけていませんので、必要に応じてつけてください。…

copypet.jp

記事を見る

browser:  65 11 20 10 

背景パターン[12選]

オルタネートストライプ風 パターン

ニャン易度 
<div class="cp_bgpattern13"></div>
.cp_bgpattern13 {
	background:
	 linear-gradient(90deg, #ffffff 0.2em, transparent 0),
	 linear-gradient(90deg, #bbdefb 50%, transparent 0),
	 linear-gradient(90deg, #ef9a9a 50%, #7986cb 0);
	background-size: 20px,40px,80px;
}

千鳥格子 パターン

ニャン易度 
<div class="cp_bgpattern14"></div>
.cp_bgpattern14 {
	background-color: #E0E0E0;
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px, 0 0, 8px 8px, 0 0;
	background-image:
	 linear-gradient(45deg,  #BDBDBD 25%, #BDBDBD 25%,
		 transparent 25%, transparent 100%),
	 linear-gradient(-135deg, #BDBDBD 25%, #BDBDBD 25%,
		 transparent 25%, transparent 100%),
	 linear-gradient(-135deg, #E0E0E0 25%, #E0E0E0 25%,
		 transparent 25%, transparent 100%),
	 linear-gradient(45deg, #E0E0E0 25%, #E0E0E0 25%,
		 transparent 25%, transparent 100%),
	 linear-gradient(135deg, #BDBDBD 12.5%, #BDBDBD 12.5%,
		 transparent 12.5%, transparent 25%,
		 #BDBDBD 25%, #BDBDBD 37.5%,
		 transparent 37.5%, transparent 62.5%,
		 #BDBDBD 62.5%, #BDBDBD 75%,
		 transparent 75%, transparent 87.5%,
		 #BDBDBD 87.5%, #BDBDBD 100%);
}

斜めトーンオントーンチェック風 パターン

ニャン易度 
<div class="cp_bgpattern15"></div>
.cp_bgpattern15 {
	background:
	repeating-linear-gradient(-45deg,
		transparent,
		transparent 1em,
		rgba(248,187,208, 0.4) 0,
		rgba(248,187,208, 0.1) 2em,
		rgba(248,187,208, 0.3) 0,
		rgba(248,187,208, 0.2) 4em,
		rgba(244,143,177, 0.6) 0,
		rgba(244,143,177, 0.2) 2em),
	repeating-linear-gradient(45deg,
		transparent,
		transparent 1em,
		rgba(248,187,208, 0.4) 0,
		rgba(248,187,208, 0.1) 2em,
		rgba(248,187,208, 0.3) 0,
		rgba(248,187,208, 0.2) 4em,
		rgba(244,143,177, 0.4) 0,
		rgba(244,143,177, 0.1) 2em);
	background-blend-mode: multiply;
}

シェパードチェック パターン

ニャン易度 
<div class="cp_bgpattern16"></div>
.cp_bgpattern16 {
	background-color: rgba(188,170,164 ,1);
	background-image:
	 linear-gradient(45deg,
	  rgba(121,85,72 ,1) 25%, rgba(121,85,72 ,1) 25%,
	  transparent 25%, transparent 100%),
	 linear-gradient(-135deg,
	  rgba(121,85,72 ,1) 25%, rgba(121,85,72 ,1) 25%,
	  transparent 25%, transparent 100%),
	 linear-gradient(-135deg,
	  rgba(188,170,164 ,1) 25%, rgba(188,170,164 ,1) 25%,
	  transparent 25%, transparent 100%),
	 linear-gradient(45deg,
	  rgba(188,170,164 ,1) 25%, rgba(188,170,164 ,1) 25%,
	  transparent 25%, transparent 100%),
	 linear-gradient(45deg,
	  rgba(121,85,72 ,1) 0%,
	  rgba(121,85,72 ,1) 6%, transparent 6%,
	  transparent 11%, rgba(121,85,72 ,1) 11%,
	  rgba(121,85,72 ,1) 17%, transparent 17%,
	  transparent 22%, rgba(121,85,72 ,1) 22%,
	  rgba(121,85,72 ,1) 28%, transparent 28%,
	  transparent 33%, rgba(121,85,72 ,1) 33%,
	  rgba(121,85,72 ,1) 39%, transparent 39%,
	  transparent 44%, rgba(121,85,72 ,1) 44%,
	  rgba(121,85,72 ,1) 50%, transparent 50%,
	  transparent 55%, rgba(121,85,72 ,1) 55%,
	  rgba(121,85,72 ,1) 61%, transparent 61%,
	  transparent 66%, rgba(121,85,72 ,1) 66%,
	  rgba(121,85,72 ,1) 72%, transparent 72%,
	  transparent 77%, rgba(121,85,72 ,1) 77%,
	  rgba(121,85,72 ,1) 83%, transparent 83%,
	  transparent 88%, rgba(121,85,72 ,1) 88%,
	  rgba(121,85,72 ,1) 94%, transparent 94%,
	  transparent 100%);
	background-size: 40px 40px;
	background-position: 0 0, 20px 20px, 0 0, 20px 20px, 0 0;
}

マドラスチェック風 パターン

ニャン易度 
<div class="cp_bgpattern17"></div>
.cp_bgpattern17 {
	background-color: rgba(0,105,92,1);
	background-image:
	 repeating-linear-gradient(90deg,
	  transparent 5px, rgba(38,50,56 ,0.7) 5px,
	  rgba(38,50,56 ,0.7) 10px, rgba(210,118,110,0) 10px,
	  rgba(210,118,110,0) 35px, rgba(194,24,91 ,0.5) 35px,
	  rgba(194,24,91 ,0.5) 40px, rgba(38,50,56 ,0.7) 40px,
	  rgba(38,50,56 ,0.7) 50px, rgba(11,36,45,0) 50px,
	  rgba(11,36,45,0) 60px, rgba(194,24,91 ,0.5) 60px,
	  rgba(194,24,91 ,0.5) 70px, rgba(255,235,59,0.5) 70px,
	  rgba(255,235,59,0.5) 80px, rgba(247,179,85,0) 80px,
	  rgba(247,179,85,0) 90px, rgba(194,24,91 ,0.5) 90px,
	  rgba(194,24,91 ,0.5) 110px, rgba(210,118,110,0) 110px,
	  rgba(210,118,110,0) 120px, rgba(38,50,56 ,0.7) 120px,
	  rgba(38,50,56 ,0.7) 140px),
	 repeating-linear-gradient(180deg,
	  transparent 5px, rgba(38,50,56 ,0.7) 5px,
	  rgba(38,50,56 ,0.7) 10px, rgba(210,118,110,0) 10px,
	  rgba(210,118,110,0) 35px, rgba(194,24,91 ,0.5) 35px,
	  rgba(194,24,91 ,0.5) 40px, rgba(38,50,56 ,0.7) 40px,
	  rgba(38,50,56 ,0.7) 50px, rgba(11,36,45,0) 50px,
	  rgba(11,36,45,0) 60px, rgba(194,24,91 ,0.5) 60px,
	  rgba(194,24,91 ,0.5) 70px, rgba(255,235,59,0.5) 70px,
	  rgba(255,235,59,0.5) 80px, rgba(247,179,85,0) 80px,
	  rgba(247,179,85,0) 90px, rgba(194,24,91 ,0.5) 90px,
	  rgba(194,24,91 ,0.5) 110px, rgba(210,118,110,0) 110px,
	  rgba(210,118,110,0) 140px, rgba(38,50,56 ,0.7) 140px,
	  rgba(38,50,56 ,0.7) 160px);
}

斜めピンドット風(ドット間にラインあり) パターン

ニャン易度 
<div class="cp_bgpattern18"></div>
.cp_bgpattern18 {
	background-color: #ffffff;
	background-image:
	 radial-gradient(#3F51B5 4%, #3F51B5 7%, transparent 7%),
	 radial-gradient(#3F51B5 4%, #3F51B5 7%, transparent 7%),
	 linear-gradient(#ffffff 5%,#ffffff 5%,
		 transparent 15%, transparent 15%),
	 linear-gradient(45deg, transparent 30%, transparent 49%,
		 #9FA8DA 49%, #9FA8DA 50%,
		 transparent 50%, transparent 100%),
	 linear-gradient(-45deg, transparent 30%, transparent 49%,
		 #9FA8DA 49%, #9FA8DA 50%,
		 transparent 50%, transparent 100%);
	background-position: 50px 50px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
	background-size: 100px 100px,100px 100px,100% 4px,100px 100px,100px 100px;
}

ビンテージの壁紙風 パターン

ニャン易度 
<div class="cp_bgpattern19"></div>
.cp_bgpattern19 {
	background-color: rgba(0,77,64,1);
	background-image:
	 radial-gradient(rgb(0,137,123) 4%, rgb(0,105,92) 9%, rgba(0,121,107,0) 9%),
	 radial-gradient(rgb(0,137,123) 4%, rgb(0,105,92) 9%, rgba(102,0,0,0) 9%),
	 radial-gradient(rgba(0,150,136 ,0.8) 20%, rgba(0,121,107,0) 100%),
	 radial-gradient(rgba(0,150,136 ,0.8) 20%, rgba(0,121,107,0) 100%),
	 radial-gradient(rgb(0,121,107) 35%, rgba(0,121,107,0) 60%),
	 radial-gradient(rgb(0,121,107) 35%, rgba(0,121,107,0) 60%),
	 radial-gradient(rgba(0,121,107 ,0.7) 0, rgba(0,121,107,0) 100%),
	 radial-gradient(rgba(0,121,107 ,0.7) 0, rgba(0,121,107,0) 100%),
	 linear-gradient(45deg, rgba(0,121,107,0) 49%, rgb(0,0,0) 50%, rgba(0,121,107,0) 70%),
	 linear-gradient(-45deg, rgba(0,121,107,0) 49%, rgb(0,0,0) 50%, rgba(102,0,0,0) 70%);
	background-position: 0 0, 50px 50px, 50px 0, 0 50px, 50px 0, 100px 50px, 0 0, 50px 50px, 0 0, 0 0;
	background-size: 100px 100px;
}

七宝柄を変形させたパターン

ニャン易度 
<div class="cp_bgpattern20"></div>
.cp_bgpattern20 {
	background-color: rgba(250,250,250,1);
	background-image:
	 radial-gradient(closest-side,
		 transparent 99.9%, rgba(236,236,236,0.8) 100%),
	 radial-gradient(closest-side,
		 transparent 99.9%, rgba(236,236,236,0.8) 100%);
	background-position: 0 0, 30px 30px;
	background-size: 60px 60px;
}

カーボン風 パターン

ニャン易度 
<div class="cp_bgpattern21"></div>
.cp_bgpattern21 {
	background:
	linear-gradient(27deg, #0e0f14 5px, transparent 5px) 0 5px,
	linear-gradient(207deg, #0e0f14 5px, transparent 5px) 10px 0px,
	linear-gradient(27deg, #14151f 5px, transparent 5px) 0px 10px,
	linear-gradient(207deg, #14151f 5px, transparent 5px) 10px 5px,
	linear-gradient(90deg, #14151c 10px, transparent 10px),
	linear-gradient(#15151c 25%, #12131a 25%, #12131a 50%,
		transparent 50%, transparent 75%, #191b24 75%, #191b24);
	background-color: #0c0d12;
	background-size: 20px 20px;
}

雫型のドットパターン

ニャン易度 
<div class="cp_bgpattern22"></div>
.cp_bgpattern22 {
	background-color: #E3F2FD;
	background-image:
	 linear-gradient(68deg, #BBDEFB 0.5em, transparent 0.5em),
	 linear-gradient(-68deg, #BBDEFB 0.5em, transparent 0.5em),
	 radial-gradient(circle, #BBDEFB 0.5em, transparent 0.5em),
	 linear-gradient(68deg, #90CAF9 0.5em, transparent 0.5em),
	 linear-gradient(-68deg, #90CAF9 0.5em, transparent 0.5em),
	 radial-gradient(circle, #90CAF9 0.5em, transparent 0.5em);
	background-position: 3em -3em,-3em -3em, 0 0, 0 0, 0 0, 3em 3em;
	background-size: 6em 6em;
	background-repeat: repeat;
}

ハート型のドットパターン

ニャン易度 
<div class="cp_bgpattern23"></div>
.cp_bgpattern23 {
	background-color: #ffebee;
	background-image:
	linear-gradient(135deg, #F8BBD0 0.85em, transparent 0),
	linear-gradient(-135deg, #F8BBD0 0.85em, transparent 0),
	radial-gradient(circle at 7.4em 7.4em,
		#F8BBD0 0.85em, transparent 0.85em),
	radial-gradient(circle at 0.56em 7.4em,
		#F8BBD0 0.85em, transparent 0.85em),
	linear-gradient(135deg, #E1BEE7 0.85em, transparent 0),
	linear-gradient(-135deg, #E1BEE7 0.85em, transparent 0),
	radial-gradient(circle at 7.4em 7.4em,
		#E1BEE7 0.85em, transparent 0.85em),
	radial-gradient(circle at 0.56em 7.4em,
		#E1BEE7 0.85em, transparent 0.85em);
	background-position: 0 4em, 0 4em, 0 -4em, 0 -4em, 4em 0, 4em 0, 4em 0, 4em 0;
	background-size: 8em 8em;
	background-repeat: repeat;
}

エアメール風 パターン

ニャン易度 
<div class="cp_bgpattern24"></div>
.cp_bgpattern24 {
	position: relative;
}
.cp_bgpattern24::after {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	background: repeating-linear-gradient(45deg,
		#ffffff, #ffffff 10px,
		#5C6BC0 0, #5C6BC0 20px,
		#ffffff 0, #ffffff 30px,
		#C2185B 0, #C2185B 40px);
}
.cp_bgpattern24::before {
	position: absolute;
	z-index: 2;
	top: 12px;
	left: 12px;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	content: '';
	border-radius: 14px;
	background-color: #ffffff;
}

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？