<div class="example"></div>
<div class="example2"></div>
<div class="example3"></div>
<div class="example4"></div>
<div class="example5"></div>

div {
  height: 60vh;
  width: 60vh;
  background: lightgray;
  float: left;
  margin: 5vh 5vh;
/*   border: 1px solid lightgray; */
  box-shadow: 0 0.5vh 2vh rgba(0,0,0,.5);
}

/* we can combine different gradients to make complicated background picture  */
.example {
  background: lightgray;
  background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0),
                    linear-gradient(       rgba(200,0,0,.5) 50%, transparent 0);
  background-size: 2vh 2vh;
}

.example2 {
  background: #58a;
  background-image: linear-gradient(90deg, white 1px, transparent 0),
                    linear-gradient(       white 1px, transparent 0);
  background-size: 25% 25%;
}

.example3 {
  background: #58a;
  background-image: linear-gradient(90deg, white 2px, transparent 0),
                    linear-gradient(       white 2px, transparent 0),
                    linear-gradient(90deg, white 1px, transparent 0),
                    linear-gradient(       white 1px, transparent 0);
  background-size: 75px 75px, 75px 75px,
                  15px 15px, 15px 15px;
}

.example4 {
  background: #655;
  background-image: radial-gradient(tan 20%, transparent 0),
                    radial-gradient(tan 20%, transparent 0);
  background-size: 15vh 15vh;
  background-position: 0 0, 7.5vh 7.5vh;
}

.example5 {
  background: #eee;
  background-image:
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0);
  background-position: 
    0 0, 15px 15px,
    15px 15px, 30px 30px;
  background-size: 30px 30px;
    
}