<link href="https://fonts.googleapis.com/css?family=Metamorphous" rel="stylesheet">

<h1>Background Patterns</h1>
<div id="box">
  <div class="pattern"></div>
  <div class="pattern"></div>
  <div class="pattern"></div>
  <div class="pattern"></div>
  <div class="pattern"></div>
  <div class="pattern"></div>
  <div class="pattern"></div>
  <div class="pattern"></div>
  <div class="pattern"></div>
</div>

body{
  background-color:#ffefd5;
}

h1{
  font-family: 'Metamorphous', cursive;
  font-size:50px;
  text-align:center;
  margin-bottom:5rem;
}

#box:before,
#box:after{
  content:" ";
  display:table;
}

#box:after{
  clear:both;
}

#box{
  width:50vw;
  margin:0 auto;
}

.pattern{
  width:200px;
  height:200px;
  position:relative;
  float:left;
  margin:1.5vw;
  border-radius:5px;
}

.pattern:first-child{
  background:repeating-linear-gradient(45deg, #ffc0cb, #ffc0cb 50%, #ffd2da 50%, #ffd2da);
  background-size:20px 20px;
}

.pattern:nth-child(2){
  background:repeating-radial-gradient(circle, #aed8e2, #aed8e2 10%, transparent 10%, transparent 22%, #aed8e2 40%, #aed8e2);
  background-size:15px;
}

.pattern:nth-child(3){
  background-color:#e29c75;
  background-image:repeating-radial-gradient(circle, transparent, #eab99e 50%, #eab99e 100%);
  background-size:10px;
}

.pattern:nth-child(4){  
   background-image: repeating-linear-gradient(
     45deg, 
     #dfcae3, transparent 5px, 
     #011852 5px, #011852 10px
   ), 
     repeating-linear-gradient(
       -45deg, 
       #ffd200, #ffd200 5px, 
       #011852 5px, #011852 10px
     );
  background-size:12px 12px;
}

.pattern:nth-child(5){
  background-color:#dfcae3;
     background-image: repeating-linear-gradient(
     45deg, 
     transparent, transparent 10px, 
     #fff 10px, #fff 12px
   ), 
     repeating-linear-gradient(
       -45deg, 
       transparent, transparent 10px, 
       #fff 10px, #fff 12px
   );
}

.pattern:nth-child(6){
  background-color:#CF9132;
  background-image:
    repeating-linear-gradient(
    90deg,
    transparent, transparent 80px,
    #980404 80px, #980404 82px
  ), 
    repeating-linear-gradient(
    transparent, transparent 40px,
    rgba(172, 54, 54, .5) 40px, rgba(172, 54, 54, .5) 42px
  ),
    repeating-linear-gradient(
    90deg,
    transparent, transparent 10px,
    rgba(88, 120, 18, .5) 10px, rgba(88, 120, 18, .5) 30px
  ),
    repeating-linear-gradient(
    transparent, transparent 10px,
    rgba(184, 139, 0, 1) 10px, rgba(184, 139, 0, 1) 30px
  );
}

.pattern:nth-child(7){
  background-color:#AC3636;
  background-image:
    repeating-linear-gradient(
      transparent, transparent 30%,
      #fff 80%, transparent 80%
  );
  background-size:20px;
}

.pattern:nth-child(8){
  background-color:#356983;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent, transparent 10px,
      #7196a8 20px, #7196a8 25px
    );
}

.pattern:nth-child(9){
  background-color:#FFA111;
  background-image:
     repeating-linear-gradient(
      -30deg,
      transparent, transparent 30%,
      #fff 30%, #fff 35%    
    ),
    repeating-linear-gradient(
      30deg,
      transparent, transparent 30%,
      #fff 30%, #fff 35%    
    ),
    repeating-radial-gradient(
      circle,
      #fff, #fff 5%,
      transparent 15%, transparent 100%
    );
  background-size:40px;
}