title: How do I blur background-image but keep hard edges?
body: <p><a href="https://i.stack.imgur.com/ysz3h.png" rel="nofollow noreferrer">The desired effect (mockup)</a>.</p>
  
  <p>I masked an image to a button in my form</p>
  
  <p>When I apply a blur to the background-image, I get soft edges on my button, which I do not want. </p>
  
  <p>How can I retain the hard edges of the button and also have the text appear on top?</p>
  
  <p>View the Pen: <a href="http://codepen.io/anon/pen/PWpMpX" rel="nofollow noreferrer">http://codepen.io/anon/pen/PWpMpX</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>   &lt;form&gt;
       &lt;!-- Inputs not shown --&gt;
      &lt;button id="gButton"&gt;Preview Album &amp;raquo;&lt;/button&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>button#gButton{
    display: block;
    width: 280px;
    height: 42px;
    border: none;
    border-radius: 11px;
    background-color: #B08DC0;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
  
    /*Background Image Stuff Below*/
    background-image: url(https://upload.wikimedia.org/wikipedia/en/3/35/Flume_-_Skin.png);
  
    background-size: 140%;
    background-position: center;
  
    -webkit-background-clip: content-box;
    background-clip: content-box;
  
    color: rgba(0,0,0,0);
  
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px); 
  }
  
  form{
    width: 280px; 
    margin:0 auto; 
    display: block;
    text-align: center;
    margin-top: 50px; 
  }
  </code></pre>