Filters

The filter property provides graphical effects like blurring, saturating or color shifting an element. Filters can be used alone, or combined in any way. However, the order in which filters are applied matters - applying grayscale() after any other filter will result in a gray result.

In this section we shall examine the various possibilities offered by this property.

The following filters can be used alone, or in any number and combination. Care is to be taken to the order the filters are being appplied.

filter: grayscale([ <number> | <percent> ])

This filter converts the input to grayscale. The amount value defines the proportion of the conversion.

filter: sepia([ <number> | <percent> ])

This filter converts the input to sepia. The amount value defines the proportion of the conversion.

filter: saturate([ <number> | <percent> ])

This filter saturates the input. The amount value defines the proportion of the conversion.

filter: hue-rotate(<angle>)

This filter applies a hue rotation to the input. The angle value defines the number of degrees around the color circle that the rotation will be performed.

filter: invert([ <number> | <percent> ])

This filter inverts the samples of the input. The amount value defines the proportion of the conversion.

filter: opacity([ <number> | <percent> ])

This filter applies transparency to the input. The amount value defines the proportion of the conversion. This function is similar to the opacity property.

filter: brightness([ <number> | <percent> ])

This filter makes the input appear more or less bright. The amount value defines the proportion of the conversion. Values over 100% are allowed.

filter: contrast([ <number> | <percent> ])

This filter controls the level of contrast. The amount value defines the proportion of the conversion.

filter: blur(<length>)

This filter applies a gaussian blur to the input. The amount value defines the proportion of the conversion.

filter: drop-shadow(<length>{2,3} <color>?)

This filter applies a drop shadow effect to the input. This is a blured, offset version of the input, composited below the image.

Alternatively, a filter can be written in SVG and can be referenced by a URL:

filter: url(<url>)

This filter takes the URL of an SVG filter. An anchor can be used to reference a specific filter element.

The resolution used when rasterising to images for applying CSS and SVG filters is controlled through the prince-filter-resolution property. The default value is 96dpi for compatibility with web browsers.