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>