<div class="container">
  <p>
    <code>drop-shadow()</code> vs. <code>box-shadow</code>
  </p>
  <div class="shadow element-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet quae doloribus autem eius enim tempore at ratione tenetur nobis similique quaerat numquam ipsum accusamus accusantium rerum earum consequatur excepturi facere!
  </div>
  <div class="shadow element-2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad libero ullam ratione velit atque enim maxime deleniti molestias officiis ea repudiandae sequi repellat cum consectetur dolore fugiat id incidunt repellendus?
  </div>

  <div class="drop-shadow">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/flake.png" alt="" class="original" />
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/flake.png" alt="" class="filtered" /> 
  </div>
  <div class="box-shadow">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/flake.png" alt="" class="original" />
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/flake.png" alt="" class="filtered" /> 
  </div>
  <p>
    <code>grayscale()</code>
  </p>
  <div class="grayscale">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="original" />
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="filtered" />
  </div>
  <p>
    <code>blur()</code>
  </p>
  <div class="blur">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="original" />
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="filtered" /> 
  </div>
  <p>
    <code>sepia()</code>
  </p>
  <div class="sepia">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="original" />
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="filtered" /> 
  </div>
  <p>
    <code>brightness()</code>
  </p>
  <div class="brightness">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="original" />
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="filtered" /> 
  </div>
  <p>
    <code>contrast()</code>
  </p>
  <div class="contrast">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="original" />
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="filtered" /> 
  </div>
  <p>
    <code>hue-rotate()</code>
  </p>
  <div class="hue-rotate">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="original" />
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="filtered" /> 
  </div>
  <p>
    <code>invert()</code>
  </p>
  <div class="invert">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="original" />
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="filtered" /> 
  </div>
  <p>
    <code>opacity()</code>
  </p>
  <div class="opacity">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="original" />
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="filtered" /> 
  </div>
  <p>
    <code>saturate()</code>
  </p>
  <div class="saturate">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="original" />
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="filtered" /> 
  </div>

  <p><code>url()</code> <small>(The SVG filter applied to this element can be found in the source code of this demo)</small></p>
  <div class="url">
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="original" />
    <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/filter/city.jpg" alt="" class="filtered" /> 
  </div>

  <!-- SVG filter called in the last demo -->
  <svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="myFilter" x="-5%" y="-5%" width="110%" height="110%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
    </filter>
  </svg>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 10px auto;
  max-width: 900px;
}

img {
  margin: 10px;
}

p,
pre {
  padding: 20px;
  background-color: #111;
  color: white;
}

code {
  font-size: 1.2em;
}

.shadow {
  width: 300px;
  float: left;
  margin: 30px;
}

.shadow.element-1 {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

.shadow.element-2 {
  -webkit-filter: drop-shadow(10px 10px 3px black);
  filter: drop-shadow(10px 10px 3px black);
}

.drop-shadow > .filtered {
  -webkit-filter: drop-shadow(20px 20px 5px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(20px 20px 5px rgba(0, 0, 0, 0.3));
}

.box-shadow > .filtered {
  box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.3);
}

.grayscale > .filtered {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.blur > .filtered {
  -webkit-filter: blur(7px);
  filter: blur(7px);
}

.sepia > .filtered {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.brightness > .filtered {
  -webkit-filter: brightness(200%);
  filter: brightness(200%);
}

.contrast > .filtered {
  -webkit-filter: contrast(250%);
  filter: contrast(250%);
}

.hue-rotate > .filtered {
  -webkit-filter: hue-rotate(60deg);
  filter: hue-rotate(60deg);
}

.invert > .filtered {
  -webkit-filter: invert(.8);
  filter: invert(.8);
}

.opacity > .filtered {
  -webkit-filter: opacity(.3);
  filter: opacity(.3);
}

.saturate > .filtered {
  -webkit-filter: saturate(250%);
  filter: saturate(250%);
}

.url > .filtered {
  -webkit-filter: url(#myFilter);
  -moz-filter: url(#myFilter);
  filter: url(#myFilter);
}