CSS Grids Using Linear Gradients

.grid-style {
  background: white;
  background-image:
    linear-gradient(90deg, rgba(122,48,108, .5) 50%, transparent 0),
    linear-gradient(rgba(122, 48, 108, .5) 50%, transparent 0);
  background-size: 30px 30px;
}

.grid-lines {
  background: #7A306C;
  background-image: linear-gradient(white 1px, transparent 0),
                    linear-gradient(90deg, white 1px, transparent 0);
  background-size: 30px 30px;
}

.check-print {
  background: #7A306C;
  background-image:
    linear-gradient(white 2px, transparent 0),
    linear-gradient(90deg, white 2px, transparent 0),
    linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
    linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
  background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
}

---

• hsla(hue, saturation, lightness, alpha)

hue	Defines a degree on the color circle (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue
saturation	Defines the saturation; 0% is a shade of gray and 100% is the full color (full saturation)
lightness	lightness Defines the lightness; 0% is black, 50% is normal, and 100% is white
alpha	Defines the opacity as a number between 0.0 (fully transparent) and 1.0 (fully opaque)