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

更新日 : 2021.04.11

背景パターンをCSSで実装する
Share
0
0
8
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. 【保存版】CSSのみのボタンデザイン!私が現場で使ってきたボタンアイデア30選の画像

    【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選

  2. 現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介しますの画像

    現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します

  3. Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

    Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

  4. CSS見出しデザイン21スタイル - シンプルな見出しデザインをご紹介の画像

    CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介

  5. ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装するの画像

    CSSのみで実装するボタン、テキストリンク、hoverスタイル19選