Purpose: used to add photographic effects to images.
Example
Img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
The second line is correct syntax for modern browsers. The first line (-webkit) is for older and nonstandard browsers.
Css Filter List
Blur(px)
Higher value creates more blur
Brightness(%)
Defalt is 100%. Lower values make the image darker, higher values make it brighter
Contrast(%)
0% is black, 100% is the default. Higher values reduce contrast.
Drop-shadow(h-value, v-value shadow blur spread color)
h-value is a pixel value for the shadow. Positive values move the shadow to the right.
v-value is a pixel value for the shadow. Positive values move the shadow down.
Blur: optional, must be in pixels. Blurs the shadow.
Spread: optional, must be in pixels. Positive values make the shadow expand. Not widely supported.
Color: optional, adds a color to the shadow.
Grayscale(%)
0% is the default, 100% is completely gray (black and white)
Hue-rotate(deg)
Maximum value is 360 degrees. This rotates the hue.
Invert(%)
100% is complete inversion.
Opacity(%)
0% is transparent, 100% is original image.
Saturate(%)
100% is default. Higher values provide super-saturated images.
Sepia(%)
0% is the default, 100% is completely sepia.
Filter and Browser Rendering
Filters are "expensive" in that they do use a significant amount of processing power; this can delay browser rendering if too many filters are used (use filters sparingly).
Filters and Background Images
Unfortunately filter is difficult (but not impossible) to use on a page background. However it can be used to create a background image within a division.
