CSS and SVG Filters

Definition

A method for altering the appearance of images (typical use) or HTML elements. Filters can be applied through CSS or SVG. It works in Firefox prefix-free and Webkit using the -webkit- prefix. IE may have support starting with Edge.

Articles:

Filters are also available in CSS, but there is some sharing with SVG. See Color Filters Can Turn Your Gray Skys Blue.

Example CSS Filters

.blur {
    filter: blur(3px);
}
.brightness {
    filter: brightness(5);
}
.contrast {
    filter: contrast(8);
}
.hue-rotate {
    filter: hue-rotate(90deg);
}
.hue-rotate2 {
    filter: hue-rotate(180deg);
}
.hue-rotate3 {
    filter: hue-rotate(270deg);
}
.saturate {
    filter: saturate(10);
}
.grayscale {
    filter: grayscale(1);
}
.sepia {
    filter: sepia(1);
}
.invert {
    filter: invert(1)
}