title: Seamless box-shadow for blurry effect
body: <p>I am trying to make a div look like a white glowing circle with no edges. The css is achieved with:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #000;
  }
  div {
    border-radius: 50%;
    /* makes the div background circular */
    background: white;
    height: 275px;
    width: 275px;
    box-shadow: 0px 0px 220px 279px #fff;
    /* creates glow effect */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When there is a problem it looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/oSSOL.png" alt="Example"></p>
  
  <p>The problem is that on some screens, there is a line separating the circle from the glow. I am trying to achieve a seamless glow without the circle. I have tried <code>filter:blur</code> but this is not an option since it blurs the logo image nested inside the div.</p>
  
  <p>The problem is on <a href="http://brietsparks.net/" rel="nofollow noreferrer">the landing page of this site</a>.</p>