img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

เพิ่มความสามารถได้ โดยใช้ Filter Functions ต่างๆ

CSS Syntax

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

ตัวอย่าง

img {
    -webkit-filter: blur(5px); /* Safari */
    filter: blur(5px);
}

img {
    -webkit-filter: brightness(200%); /* Safari */
    filter: brightness(200%);
}

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

img {
    -webkit-filter: grayscale(50%); /* Safari */
    filter: grayscale(50%);
}

img {
    -webkit-filter: opacity(30%); /* Safari */
    filter: opacity(30%);
}

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

หรือทั้งหมด

.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.brightness {
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}

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

.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}

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

.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}

http://www.w3schools.com/cssref/css3_pr_filter.asp