<p>Examples of combining multiple backgrounds (gradients and radials) to create patterns using only css</p>
<div id="grid1" class="outer">
 <div class="inner">
   Variation 1
  </div> 
</div>
<div id="grid2" class="outer">
 <div class="inner">
 Variation 2
  </div> 
</div>
<div id="grid3" class="outer">
 <div class="inner">
 Variation 3
  </div> 
</div>
<div id="grid4" class="outer">
  <div class="inner">
    Variation 4
  </div>
</div>
<div id="grid5" class="outer">
 <div class="inner">
 Variation 5
  </div> 
</div>
<div id="grid6" class="outer">
 <div class="inner">
 Variation 6
  </div> 
</div>

<div id="grid7" class="outer">
 <div class="inner">
 Variation 7
  </div> 
</div>

div,
p {
  margin: 0 auto;
  background: white;
  text-align: center;
}

.outer {
  padding: 4em 0;
  border-bottom: 1px solid black;
}

.inner {
  max-width: 100px;
  opacity: .66;
  padding: 1em;
}

#grid1 {
  background-color: #d7f0a2;
  background-image: 
    radial-gradient(rgba(215, 240, 162, 0.25) 75%, transparent 0%), 
    radial-gradient(
      rgba(41, 137, 216, 0.8) 0%, 
      rgba(41, 137, 216, 0.5) 25%, 
      rgba(41, 137, 216, 0.8) 50%, 
      rgba(41, 137, 216, 0.5) 75%, 
      rgba(41, 137, 216, 0.8) 90%, 
      rgba(30, 87, 153, 0.5) 100%
    );
  background-size: 40px 20px, 80px 40px;
  background-position: 0px 10px, 0 10px;
}

#grid2 {
  background: #eee;
  background-image: radial-gradient(#ddd 20%, transparent 0%), radial-gradient(#ccc 20%, transparent 0);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

#grid3 {
  background: #00E2D5;
  background-image: radial-gradient(rgba(77, 145, 248, .6) 20%, transparent 0%), radial-gradient(rgba(77, 245, 148, .7) 60%, transparent 61%);
  background-size: 20px 30px;
  background-position: 0 0, 10px 15px;
}

#grid4 {
  background: #c7c002;
  background-image: radial-gradient(#c7c002 20%, transparent 0), linear-gradient(to right, #F4FFC3, #F4FFC3 5%, #c7c002 5%, #c7c002 95%, #F4FFC3 95%);
  background-size: 20px 20px, 100px 100px;
  background-position: 10px 10px, 0 0;
}

#grid5 {
  background-color: #B15EB4;
  background-image: radial-gradient(rgba(177, 45, 148, .6) 70%, transparent 75%), radial-gradient(rgba(77, 45, 148, .8) 30%, transparent 33%);
  background-size: 40px 20px, 10px 20px;
  background-position: 0 0;
}

#grid6 {
  position: relative;
  overflow: hidden;
  z-index: -2;
}

#grid6::before {
  content: " ";
  position: absolute;
  top: -25%;
  left: -2.5%;
  width: 105%;
  height: 150%;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .3) 20%, transparent 0), radial-gradient(rgba(0, 0, 0, .6) 75%, rgba(255, 255, 255, .8) 100%), linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .85) 50%, rgba(0, 0, 0, .3) 100%);
  background-size: 14px 14px, 14px 100%, 100% 100%;
  background-position: 7px 0, 0 0, 0 0;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

#grid7 {
  background-image: radial-gradient(rgba(200, 255, 165, .7) 0%, transparent 70%), radial-gradient(rgba(200, 255, 165, .6) 0%, transparent 70%), radial-gradient(rgba(255, 255, 165, .5) 0%, transparent 70%), radial-gradient(rgba(255, 255, 255, .5) 0%, transparent 70%), linear-gradient( 10deg, yellow 0%, green 30%, green 80%, yellow 100%);
  background-position: -15px -7px, 0px 0px, 50% 100px, 22% 40px, 0 0;
  background-size: 30px 15px, 30px 15px, 40% 200px, 40% 200px, 100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
  ;
}