Radial gradient background

Question

I am trying to achieve the effect below using pure CSS3. I think a repeating radial gradient is the right way, but I can't figure out how to get a horizontal to large radial gradient. Any tips?

This is the closest i got jsfiddle . He is close, but he does not go “from big to small” horizontally.

.dotted {
  padding: 2.25em 1.6875em;
    background-color: #ffb55d;
  background-image: -webkit-repeating-radial-gradient(center center, #ff9d4b, #ff9d4b 2px, transparent 2px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, #ff9d4b, #ff9d4b 2px, transparent 2px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, #ff9d4b, #ff9d4b 2px, transparent 2px, transparent 100%);
  background-image: repeating-radial-gradient(center center, #ff9d4b, #ff9d4b 2px, transparent 2px, transparent 100%);
  -webkit-background-size: 5px 5px;
  -moz-background-size: 3px 3px;
  background-size: 5px 5px;
}

Answer 1

Changed jbutler483 found on codepen (just for fun) (with Chrome):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background: rgba(0,0,0,1);">
  <div class='halftone' height='100px'></div>
  <div class='halftone2' height='100px'></div>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
  }
  html,
  body {
    height: 100%;
  }
  div {
    height: 100%;
    background-color: 0;
  }
  .halftone {
    /*
      size progressively decreasing 
    */
    background-image: radial-gradient(circle, dodgerblue 85%, transparent 0), radial-gradient(circle, dodgerblue 80%, transparent 0), radial-gradient(circle, dodgerblue 75%, transparent 0), radial-gradient(circle, dodgerblue 70%, transparent 0), radial-gradient(circle, dodgerblue 65%, transparent 0), radial-gradient(circle, dodgerblue 60%, transparent 0), radial-gradient(circle, dodgerblue 55%, transparent 0), radial-gradient(circle, dodgerblue 50%, transparent 0), radial-gradient(circle, dodgerblue 45%, transparent 0), radial-gradient(circle, dodgerblue 40%, transparent 0), radial-gradient(circle, dodgerblue 35%, transparent 0), radial-gradient(circle, dodgerblue 30%, transparent 0), radial-gradient(circle, dodgerblue 25%, transparent 0), radial-gradient(circle, dodgerblue 20%, transparent 0);
    /*
      change all other values when changing this.
      I suppose this'd be easier to do in Sass.
    */
    background-size: 1em 1em;
    /*
      If you want a vertical pattern change to repeat-x, also remember to  switch the background-positions' values. Eg. "2em 0" becomes "0 2em".
    */
    background-repeat: repeat-y;
    /*
      based on background-size value
    */
    background-position: 0 0, 1em 0, 2em 0, 3em 0, 4em 0, 5em 0, 6em 0, 7em 0, 8em 0, 9em 0, 10em 0, 11em 0, 12em 0, 13em 0;
  }
  .halftone2 {
    /*
      size progressively increasing 
    */
    background-image: radial-gradient(circle, dodgerblue 20%, transparent 0), radial-gradient(circle, dodgerblue 25%, transparent 0), radial-gradient(circle, dodgerblue 30%, transparent 0), radial-gradient(circle, dodgerblue 35%, transparent 0), radial-gradient(circle, dodgerblue 40%, transparent 0), radial-gradient(circle, dodgerblue 45%, transparent 0), radial-gradient(circle, dodgerblue 50%, transparent 0), radial-gradient(circle, dodgerblue 55%, transparent 0), radial-gradient(circle, dodgerblue 60%, transparent 0), radial-gradient(circle, dodgerblue 65%, transparent 0), radial-gradient(circle, dodgerblue 70%, transparent 0), radial-gradient(circle, dodgerblue 75%, transparent 0), radial-gradient(circle, dodgerblue 80%, transparent 0), radial-gradient(circle, dodgerblue 85%, transparent 0);
    /*
      change all other values when changing this.
      I suppose this'd be easier to do in Sass.
    */
    background-size: 1em .8em;
    /*
      If you want a vertical pattern change to repeat-x, also remember to  switch the background-positions' values. Eg. "2em 0" becomes "0 2em".
    */
    background-repeat: repeat-y;
    /*
      based on background-size value
    */
    background-position: 0 0, 1em 0, 2em 0, 3em 0, 4em 0, 5em 0, 6em 0, 7em 0, 8em 0, 9em 0, 10em 0, 11em 0, 12em 0, 13em 0;
  }
  .halftone {
    animation: rt 4s infinite;
    animation-direction: alternate;
  }
  .halftone2 {
    animation: rt2 4s infinite;
    animation-direction: alternate;
  }
  @keyframes rt {
    0% {
      opacity: 0;
      transform: rotateY(0deg);
    }
    25% {
      opacity: 1
    }
    50% {
      opacity: 0;
      transform: rotateY(180deg);
    }
    75% {
      opacity: 1
    }
    100% {
      opacity: 0;
      transform: rotateY(360deg);
    }
  }
  @keyframes rt2 {
    0% {
      opacity: 1;
      transform: rotateY(0deg) translateY(-405px);
    }
    25% {
      opacity: 0
    }
    50% {
      opacity: 1;
      transform: rotateY(180deg) translateY(-405px);
    }
    75% {
      opacity: 0
    }
    100% {
      opacity: 1;
      transform: rotateY(360deg) translateY(-405px);
    }
  }
</style>

Run codeHide result

Answer 2

Significantly closer to what you are looking for:

.dotted {
    height:100px;
    width:100%;
    background: radial-gradient(orange 15%, transparent 16%) 1px 1px,
    radial-gradient(orange 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color:#ffb55d;
    background-size:16px 16px;
}

Answer 3

, , CSS3. , , , .