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

CSS HTML
Update 2018.06.14

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

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

browser:  65 11 20 10 

背景パターン[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 {
background-color: #fc693b;
background-image:
linear-gradient(-45deg, #ff5722 25%, transparent 25%,
transparent 50%, #ff5722 50%, #ff5722 75%,
transparent 75%, transparent);
background-size: 15px 15px;
}

左上がりシマ パターン

ニャン易度
<div class="cp_bgpattern04"></div>
.cp_bgpattern04 {
background-color: #616161;
background-image:
linear-gradient(45deg, #424242 25%, transparent 25%,
transparent 50%, #424242 50%, #424242 75%,
transparent 75%, transparent);
background-size: 6px 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

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