Image filters are image processors that make it possible to achieve various visual effects with an image, similar to some of those achievable in Photoshop and other graphics programs, such as blurring and color manipulation. The property used to implement these effects in CSS is the filter property. It can be useful for adding effects to a background or border. It is non-inherited and the values it takes are functions that take parameters that specify what to do to produce the desired effects. Different functions take different parameters and the property can take multiple space-separated functions. Table 16.3 lists the functions supported and what they do.
Figures 16.18 and 16.19 show how the filter property is used. The <img> attribute specifies the target image and the img{} rule two filter functions: hue-contrast() and saturate(). The first says to apply hue rotation at 90° and the second 190% contrast, resulting in the color and contrast of the image being changed. The -webkit- declaration is for browser that only supports the property via webkit. See the note on vendor prefixes in Chapter 8 for more on the prefix.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.