title: How to use CSS (and JavaScript?) to create a blurred, "frosted" background?
body: <p>I'm trying to create an iOS 7 style frosted look with HTML5, CSS3 and JavaScript which can work on webkit browsers.</p>
  
  <p>Technically, given the following HTML:</p>
  
  <pre><code>&lt;style&gt;
    #partial-overlay {
      width: 100%;
      height: 20px;
      background: rgba(255, 255, 255, .2); /* TODO frost */
      position: fixed;
      top: 0;
      left: 0;
    }
  &lt;/style&gt;
  &lt;div id="main-view"&gt;
    &lt;div style="width: 50px; height: 50px; background: #f00"&gt;&lt;/div&gt;
    To my left is a red box&lt;br&gt;
    Now there is just text&lt;br&gt;
    Text that goes on for a few pixels &lt;br&gt;
    or even more
  &lt;/div&gt;
  &lt;div id="partial-overlay"&gt;
    Here is some content
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd like to apply something like a <code>-webkit-filter: blur(5px)</code> to the first 20px horizontally of <code>#main-view</code>.</p>
  
  <p>If the CSS was modified to be <code>#partial-overlay { width: 20px; height: 100%; ...}</code> then I'd need to apply the <code>-webkit-filter: blur(5px)</code> to the first 20px vertically.</p>
  
  <p>The obvious solution is to use javascript to make a clone of the <code>#main-view</code>, set <code>overflow: hidden</code> and then change the width/height as appropriate but that seems to me hard to generalize to more complex pages/CSS structures.</p>
  
  <p>Is there a better way to achieve this with minimal performance hit and maximal generalizability?</p>
  
  <p><strong>EDIT</strong>: Here is an example of what I'm trying to achieve:
  <img src="https://i.stack.imgur.com/cyKkw.png" alt="Mockup"></p>