A Simple technique to create a dot pattern or dot grid background

CSS Dot Pattern/Grid Background

Simple technique to create a dot pattern or dot grid background. Support: all modern browsers and IE9+.

Made with

Html
Css/SCSS

Author

Edmundo Santos

Css

// Colors
$bg-color: #7577FA;
$dot-color: #9192FB;

// Dimensions
$dot-size: 2px;
$dot-space: 22px;

body {
	background:
		linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center,
		linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center,
		$dot-color;
	background-size: $dot-space $dot-space;
}

Demo

See the Pen CSS dot pattern/grid background by Edmundo Santos (@edmundojr) on CodePen.