Home > Abakada: Back to Basics > Language References > CSS Properties > Filter Functions

---

CSS filters comprise a set of functions that allow authors to manipulate the display of visual objects, with any of several predefined filter effects.

Property	Description
blur	Applies a blur effect to an image.
brightness	Adjusts the brightness of an image.
contrast	Adjusts the contrast of an image.
drop-shadow	Applies a drop shadow effect to an image.
grayscale	Renders an image in grayscale.
hue-rotate	Applies a hue rotation to an image.
invert	Reverses the hue, saturation, and brightness values of an image.
opacity	Sets the level of opacity for an image.
saturate	Sets the level of saturation for an image.
sepia	Renders an image in sepia mode.
url	Sets the location of an XML file that specifies an SVG filter.

The following example illustrates the effects of passing different values to the available CSS filter functions.

CSS Filter Functions Demo Run Sample | View Source

This section assumes you already have some familiarity with the basics of CSS filters. If not, I suggest starting with a brief overview on Understanding and Using CSS Filters.

External Reference: Filter Effects Module Level 1

CSS Animation Properties, CSS Transform Functions, CSS Transition Properties