Image Adjustment with CSS Filter Effects

Adjusting image Brightness and Contrast, or turning image into Grayscale or Sephia is a common feature you may find in image editing application, like Photoshop. But, it is now possible to add the same effects to web images using CSS.
This capability comes from the Filter Effects which actually is still in the Working Draft stage. However, the Webkit browser seems to be a step a head in implementing this feature.
So, let’s give it a try and we will use this image from Mehdi Kh to demonstrating the effects.

The Effects

Applying the effects is very easy. Take a look at the snippet below, for turning images into grayscale;

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