title: Cloudy transparent edge to div
body: <p>I am trying to get a "cloudy transparent edge" to a bootstrap modal. Is this possible?</p>
  
  <p>I have tried this CSS:</p>
  
  <pre><code>  .modal-content {
      border: none;
      outline: none;
      -webkit-box-shadow:
              5px 5px 10px 0 rgba(243, 156, 18, 0.1) inset,
              -5px -5px 10px 0 rgba(243, 156, 18, 0.1) inset;
      -moz-box-shadow:
              5px 5px 10px 0 rgba(243, 156, 18, 0.1) inset,
              -5px -5px 10px 0 rgba(243, 156, 18, 0.1) inset;
      -o-box-shadow:
              5px 5px 10px 0 rgba(243, 156, 18, 0.1) inset,
              -5px -5px 10px 0 rgba(243, 156, 18, 0.1) inset;
      box-shadow:
              5px 5px 10px 0 rgba(243, 156, 18, 0.1) inset,
              -5px -5px 10px 0 rgba(243, 156, 18, 0.1) inset;
    }
  </code></pre>
  
  <p>The effect I want looks lie the photo below, with the blurring to transparent and I want it over 5px all along the square border of the div/bootstrap.</p>
  
  <p>My CSS achieves this for a color but I tried RGBA with opacity and it does not work</p>
  
  <p><a href="https://i.stack.imgur.com/arDAP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/arDAP.jpg" alt="enter image description here"></a></p>