title: css3 circle glow like a Moon light glow
body: <p>i am trying to create a moon with light glow. same as in images.</p>
  
  <p>i have tried but not much successful.</p>
  
  <p>I don't wants to use image in website. i wants to create only this with CSS3.</p>
  
  <p><strong>My circle is creating very small and also glow is in small area . i want glow in large radius area</strong></p>
  
  <p><a href="http://jsfiddle.net/naresh_kumar/ezUfG/6/" rel="noreferrer">http://jsfiddle.net/naresh_kumar/ezUfG/6/</a></p>
  
  <p><img src="https://i.stack.imgur.com/iBNIM.png" alt="enter image description here"></p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;span&gt;Glow&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Css</strong></p>
  
  <pre><code>div {
      margin: 20px 10px 10px;
      text-align: center;
      font-family: sans-serif;
  }
  
  span {
      display: inline-block;
      padding-top: 40px;
      background: whiteSmoke;
      width: 100px;
      height: 60px;
      text-align: center;
      vertical-align: middle;
  
      -webkit-box-shadow: 0 0 10px #F8A50E;
         -moz-box-shadow: 0 0 10px #F8A50E;
              box-shadow: 0 0 10px #F8A50E;
  
      -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
              border-radius: 50px;
  
      -webkit-transition: box-shadow .4s ease;
         -moz-transition: box-shadow .4s ease;
          -ms-transition: box-shadow .4s ease;
           -o-transition: box-shadow .4s ease;
              transition: box-shadow .4s ease;
  }
  
  span:hover {
      -webkit-box-shadow: 0 0 10px red;
         -moz-box-shadow: 0 0 10px red;
              box-shadow: 0 0 0 10px red;
  }
  </code></pre>