title: CSS -- transparent "glass" modal, everything else darkened
body: <blockquote>
    <p><a href="https://stackoverflow.com/questions/40010761/css-trnsparent-glass-modal-everything-else-darkened/40100652#answer-40100652"><strong>THE ANSWER: <code>background-attachment</code></strong></a></p>
  </blockquote>
  
  <hr>
  
  <blockquote>
    <p>----- <a href="http://jsbin.com/hajices/edit?output" rel="nofollow noreferrer">JSBin Example</a> ---- </p>
  </blockquote>
  
  <hr>
  
  <p>The answer is to use <code>background-attachment</code></p>
  
  <p><a href="https://i.stack.imgur.com/xurlRm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xurlRm.png" alt="screenshot"></a> </p>
  
  <hr>
  
  <blockquote>
    <p><strong>ORIGINAL QUESTION</strong></p>
  </blockquote>
  
  <p>I'm working on a project where we want to display a modal that "sees through" to the backdrop, but everywhere outside of the modal panel is slightly masked.</p>
  
  <p>I have successfully used <code>border: 10000px rgba(0,0,0,0.3)</code> with <code>border-radius: 10010px</code> but this is a hack, and I can't outline the modal with a <code>box-shadow</code></p>
  
  <p>Is there any standard way for doing this? Bonus points if you can think of a way to apply a transparency filter gradient to an image.</p>