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

更新日 : 2021.04.11

背景パターンをCSSで実装する
Share
1
14
11
linear-gradientrepeating-linear-gradientradial-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;
}

人気記事

  1. Chrome拡張機能を見直してみた

    便利なChrome拡張機能を見直してみた

  2. いざという時に使える13のHTML&CSS Tips集の画像

    いざという時に使える13のHTML&CSS Tips集

  3. ジュンク堂書店池袋本店の選書フェア

    ジュンク堂書店池袋本店の選書フェアで選んだ34冊の中から9冊を紹介してみる

  4. 見出しをおしゃれにする英字フォントの画像

    【無料】見出しをおしゃれにする英字フォントを19個集めてみた

  5. 見出しに使えるfit-contentを解説してみる