A Pen by Yogev Ahuvia.

<div class="wrapper">
  <hgroup>
    <h1>CSS Filter Glass</h1>
    <h3>drag an image file from your desktop onto the glass</h3>
  </hgroup>
  <div class="window">
    <div class="glass left img"></div>
    <div class="handle"></div>
    <div class="glass right filter-grayscale img"></div>
  </div>
  <ul class="filter-choice">
    <li data-filter="grayscale">
      <input type="radio" name="filter-choice-group" value="grayscale" class="filter-grayscale img" checked>
    </li>
    <li data-filter="sepia">
      <input type="radio" name="filter-choice-group" value="sepia" class="filter-sepia img">
    </li>
    <li data-filter="blur">
      <input type="radio" name="filter-choice-group" value="blur" class="filter-blur img">
    </li>
    <li data-filter="brightness">
      <input type="radio" name="filter-choice-group" value="brightness" class="filter-brightness img">
    </li>
    <li data-filter="contrast">
      <input type="radio" name="filter-choice-group" value="contrast" class="filter-contrast img">
    </li>
    <li data-filter="hue-rotate">
      <input type="radio" name="filter-choice-group" value="hue-rotate" class="filter-hue-rotate img">
    </li>
    <li data-filter="invert">
      <input type="radio" name="filter-choice-group" value="invert" class="filter-invert img">
    </li>
    <li data-filter="saturate">
      <input type="radio" name="filter-choice-group" value="saturate" class="filter-saturate img">
    </li>
    <li class="alt">
      <a href="https://www.google.com/chrome" target="_blank">
        <img src="https://kindofone.me/resources/icons/chrome-512.png" width="32" title="Chrome only" alt="Chrome only" />
      </a>
    </li>
  </ul>
</div>