CSS3 Image Filter Effects

Webkit introduced a new CSS property that allows us to adjust image through CSS. This demo shows when this property is applied to the image.

Photo by: Mehdi Kh

img {
  -webkit-filter: grayscale(100%);
}

Photo by: Mehdi Kh

      img {
      -webkit-filter: sepia(100%);
      }

Photo by: Mehdi Kh

img {
  -webkit-filter: brightness(50%);
}

Photo by: Mehdi Kh

img {
  -webkit-filter: contrast(200%);
}

Photo by: Mehdi Kh

img {
  -webkit-filter: blur(10px);
}