CodePen Embed - css filter

 <img class="blur" src="https://c5.staticflickr.com/6/5348/31351175676_098e15a4e1_z.jpg" alt="">
 <img class="brightness" src="https://c5.staticflickr.com/6/5348/31351175676_098e15a4e1_z.jpg" alt="">
 <img class="contrast" src="https://c5.staticflickr.com/6/5348/31351175676_098e15a4e1_z.jpg" alt="">
<img class="drop-shadow" src="https://c5.staticflickr.com/6/5348/31351175676_098e15a4e1_z.jpg" alt="">
<img class="grayscale" src="https://c5.staticflickr.com/6/5348/31351175676_098e15a4e1_z.jpg" alt="">
<img class="hue-rotate" src="https://c5.staticflickr.com/6/5348/31351175676_098e15a4e1_z.jpg" alt="">
<img class="invert" src="https://c5.staticflickr.com/6/5348/31351175676_098e15a4e1_z.jpg" alt="">
<img class="opacity" src="https://c5.staticflickr.com/6/5348/31351175676_098e15a4e1_z.jpg" alt="">
<img class="saturate" src="https://c5.staticflickr.com/6/5348/31351175676_098e15a4e1_z.jpg" alt="">
<img class="sepia" src="https://c5.staticflickr.com/6/5348/31351175676_098e15a4e1_z.jpg" alt="">

img{
  width: 200px;
  margin: 0 20px 20px 0;
}
.blur{
  filter: blur(10px);
}
.brightness{
  filter: brightness(200%);
}
.contrast{
  filter: contrast(200%);
}
.drop-shadow{
  filter: drop-shadow(5px 5px 10px #000);
}
.grayscale{
  filter: grayscale(50%);
}
.hue-rotate{
  filter: hue-rotate(60deg);
}
.invert{
  filter: invert(100%);
}
.opacity{
  filter: opacity(50%);
}
.saturate{
  filter: saturate(180%);
}
.sepia{
  filter: sepia(90%);
}

This Pen is owned by deathhell on CodePen.

See more by @deathhell on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.