<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 doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.