SOURCE

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

div {
    width: 300px;
    height: 300px;
    margin: 10px;
}

.a {
    background: #58a;
    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;
}


/**
    波点
    径向渐变
*/

.b {
    background: #655;
    background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}


/**
    棋盘
    角向渐变
*/

.c {
    background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red);
    background-size: 30px 30px;
}