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

CSS HTML
 
 

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

色やサイズを変えるだけでいろんな柄が作れますよ。

ちょっとクセ強めのパターンはこちら

copypet.jp

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

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

copypet.jp

記事を見る

browser:  65 11 20 

背景パターン[12選]

ヨコシマ パターン

ニャン易度
<div class="cp_bgpattern01"></div>
.cp_bgpattern01 {
	background-color: #dedede;
	background-image:
	 linear-gradient(#ecebeb 50%, transparent 50%, transparent);
	background-size: 10px 10px;
}

タテジマ パターン

ニャン易度
<div class="cp_bgpattern02"></div>
.cp_bgpattern02 {
	background-color: #8be4f0;
	background-image:
	 linear-gradient(-90deg, #80deea 50%, transparent 50%, transparent);
	background-size: 14px 14px;
}

右上りシマ パターン(ダイアゴナル・ストライプ)

ニャン易度
<div class="cp_bgpattern03"></div>
.cp_bgpattern03 {
	width: 100%;
	height: 315px;
	background-color: #fc693b;
	background-image:
	 repeating-linear-gradient(-45deg,
	 #ff5722, #ff5722 7.5px,
	 transparent 0, transparent 15px);
}

左上がりシマ パターン

ニャン易度
<div class="cp_bgpattern04"></div>
.cp_bgpattern04 {
	width: 100%;
	height: 315px;
	background-color: #616161;
	background-image: repeating-linear-gradient(45deg,
	#424242, #424242 3px,
	transparent 0, transparent 6px);
}

方眼紙 パターン

ニャン易度
<div class="cp_bgpattern05"></div>
.cp_bgpattern05 {
	background-color: #FFFDE7;
	background-size: 80px 80px;
	background-image:
	 linear-gradient(rgba(215,204,200,.7) 1%, rgba(215,204,200,.7) 1%, transparent 1%,
	  transparent 99%, rgba(215,204,200,.7) 99%, rgba(215,204,200,.7) 100%),
	 linear-gradient(90deg, rgba(215,204,200,.7) 1%, rgba(215,204,200,.7) 1%, transparent 1%,
	  transparent 99%, rgba(215,204,200,.7) 99%, rgba(215,204,200,.7) 100%),
	 linear-gradient(transparent, transparent 25%, rgba(215,204,200,.4) 25%, rgba(215,204,200,.4) 26%, transparent 26%,
	  transparent 50%, rgba(215,204,200,.4) 50%, rgba(215,204,200,.4) 51%, transparent 51%,
	  transparent 75%, rgba(215,204,200,.4) 75%, rgba(215,204,200,.4) 76%, transparent 76%, transparent 100%),
	 linear-gradient(90deg, transparent, transparent 25%, rgba(215,204,200,.4) 25%, rgba(215,204,200,.4) 26%, transparent 26%,
	  transparent 50%, rgba(215,204,200,.4) 50%, rgba(215,204,200,.4) 51%, transparent 51%,
	  transparent 75%, rgba(215,204,200,.4) 75%, rgba(215,204,200,.4) 76%, transparent 76%, transparent 100%);
}

背景グラデーションありのグラフチェック パターン

ニャン易度
<div class="cp_bgpattern06"></div>
.cp_bgpattern06 {
	background-color:#FFD54F;
	background:linear-gradient(#FFD54F,#FFA000);
}
.cp_bgpattern06::after {
	content: '';
	height:100%;
	width:100%;
	display:block;
	background-size: 20px 20px;
	background-image:
	 linear-gradient(rgba(255,255,255,.25) 3%, rgba(255,255,255,.25) 3%, transparent 3%,
	  transparent 97%, rgba(255,255,255,.25) 97%, rgba(255,255,255,.25) 100%),
	 linear-gradient(90deg, rgba(255,255,255,.25) 3%, rgba(255,255,255,.25) 3%, transparent 3%,
	  transparent 97%, rgba(255,255,255,.25) 97%, rgba(255,255,255,.25) 100%);
}

斜めギンガムチェック パターン

ニャン易度
<div class="cp_bgpattern07"></div>
.cp_bgpattern07 {
	background-size: 20px 20px;
	background-color: #43A047;
	background-image:
	linear-gradient(45deg, rgba(56, 142, 60, 0.5) 25%, transparent 25%,
	 transparent 50%, rgba(56, 142, 60, 0.5) 50%, rgba(56, 142, 60, 0.5) 75%,
	 transparent 75%, transparent),
	linear-gradient(-45deg, rgba(56, 142, 60, 0.5) 25%, transparent 25%,
	 transparent 50%, rgba(56, 142, 60, 0.5) 50%, rgba(56, 142, 60, 0.5) 75%,
	 transparent 75%, transparent);
}

ブロックチェック パターン

ニャン易度
<div class="cp_bgpattern08"></div>
.cp_bgpattern08 {
	background-color: #3F51B5;
	background-size: 10px 10px;
	background-position: 0 0, 5px 5px;
	background-image:
	 linear-gradient(45deg,  #303F9F 25%, #303F9F 25%, transparent 25%,
	  transparent 75%, #303F9F 75%, #303F9F 75%),
	 linear-gradient(-135deg, #303F9F 25%, #303F9F 25%, transparent 25%,
	  transparent 75%, #303F9F 75%, #303F9F 75%);
}

ハーリキンチェック パターン

ニャン易度
<div class="cp_bgpattern09"></div>
.cp_bgpattern09 {
	background-color: #0097A7;
	background-size: 10px 10px;
	background-image:
	 linear-gradient(45deg,  #00838F 25%, #00838F 25%, transparent 25%,
	  transparent 75%, #00838F 75%, #00838F 75%),
	 linear-gradient(-45deg, #00838F 25%, #00838F 25%, transparent 25%,
	  transparent 75%, #00838F 75%, #00838F 75%);
}

風車 パターン

ニャン易度
<div class="cp_bgpattern10"></div>
.cp_bgpattern10 {
	background-color: rgba(193,0,41,1);
	background-image:
	 linear-gradient(45deg, rgba(204,0,81,1) 25%, transparent 25%,
	  transparent 75%, rgba(204,0,81,1) 75%, rgba(204,0,81,1)),
	 linear-gradient(-45deg, rgba(204,0,81,1) 25%, transparent 25%,
	  transparent 75%, rgba(204,0,81,1) 75%, rgba(204,0,81,1));
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
}

背景ありピンドット風 パターン

ニャン易度
<div class="cp_bgpattern11"></div>
.cp_bgpattern11 {
	background-color: #00838f;
	background-image:
	 radial-gradient(#26A69A 1px, transparent 1px);
	background-size: 20px 20px;
}

ピンドット風 パターン

ニャン易度
<div class="cp_bgpattern12"></div>
.cp_bgpattern12 {
	background-color: transparent;
	background-image:
	 radial-gradient(#F48FB1 3px, transparent 3px);
	background-size: 30px 30px;
}

copypet.jp

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

More Info

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