背景パターンを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. ジュンク堂書店池袋本店の選書フェア

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

  3. 著書「現場で使えるWebデザインアイデアレシピ」を執筆しましたの画像

    著書「現場で使えるWebデザインアイデアレシピ」を執筆しました

  4. 2022年版 Web制作が捗るChrome拡張機能14選

    2022年版 Web制作が捗るChrome拡張機能14選

  5. 2021年を振り返る!Web制作関連の人気記事をあつめてみた