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.