背景パターンをCSSで実装する

linear-gradientやrepeating-linear-gradient、radial-gradientを使った背景パターンをCSSのみで実装する方法をご紹介します。画像を使わず、鮮明な背景が用意できるのでおすすめです。デザインに合わせて色を変えてご利用ください。

HTML

<div class="bg_style"></div>

斜線パターン

.bg_style {
	background-image: repeating-linear-gradient(45deg, rgba(190,200,206,0.3), rgba(190,200,206,0.3) 5px, rgba(0,0,0,0) 0, rgba(0,0,0,0) 10px);
}

ダイヤパターン

.bg_style {
	background-image:
		linear-gradient(45deg, rgba(190,200,206,0.3) 25%, rgba(190,200,206,0.3) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(190,200,206,0.3) 75%, rgba(190,200,206,0.3) 75% ),
		linear-gradient(-45deg, rgba(190,200,206,0.3) 25%, rgba(190,200,206,0.3) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(190,200,206,0.3) 75%, rgba(190,200,206,0.3) 75%);
	background-size: 20px 20px;
}

ドットパターン

.bg_style {
	background-image:
		radial-gradient(rgba(190,200,206,0.3) 30%, rgba(0,0,0,0) 31%),
		radial-gradient(rgba(190,200,206,0.3) 30%, rgba(0,0,0,0) 31%);
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px;
}

チェックパターン

.bg_style {
	background-image:
		repeating-linear-gradient(0deg, rgba(150,150,150,0.3) 0px 10px, rgba(0,0,0,0) 10px 20px),
		repeating-linear-gradient(90deg, rgba(180,180,180,0.3) 0px 10px, rgba(0,0,0,0) 10px 20px);
}

方眼紙パターン

.bg_style {
	background-image:
		linear-gradient(0deg, rgba(190,200,206,0.3) 1px, rgba(0,0,0,0) 0),
		linear-gradient(90deg, rgba(190,200,206,0.3) 1px, rgba(0,0,0,0) 0);
	background-size: 20px 20px;
	background-position: center;
}