CSS filter() Function

Use the filter() function to apply a filter to an image.

The filter() function allows you to apply filters to images. It's similar to the filter property, except that it's a function, and therefore can be used as a value itself. For example, you can use it with the background-image property to apply a filter to the background image.

The filter() function accepts two arguments. The first argument is the image. The second argument is a list of filter functions to apply to that image.

The filter functions that it accepts are the same as those accepted by the filter property. You can provide multiple filter functions if required (in order to apply multiple filters to a single image).

Here's an example:

In this example, I apply the filter() property to the background-image property. I apply this to a class that I've called filtered. Any element that uses that class will have a background image with the specified filter applied.

If your browser supports the filter() function, you'll see two images — one of which has had filter effects applied.

If you can't see the filtered image, your browser likely doesn't support the filter() function.

Official Syntax

The official syntax of the filter() function is as follows:

Where

Where

Possible Values

Here are the possible values:

<image>

The image to be filtered. Must be a valid <image> value.

<string>

A string representing the image to be filtered. Must be a valid <string> value.

blur( <length> )

Applies a Gaussian blur to the element. The passed parameter provides the radius of the blur. The parameter can be a CSS length, but not a percentage value.

Negative values are not allowed.

brightness( [ <number> | <percentage> ] )

Adjusts the brightness of the element based on the value provided. A value of 0% results in an element that is completely black. A value of 100% leaves the element unchanged. To make the element brighter, use an amount greater than 100%.

Negative values are not allowed.

contrast( [ <number> | <percentage> ] )

Adjusts the contrast of the element based on the value provided. A value of 0% results in an element that is completely gray. A value of 100% leaves the input unchanged. To increase the contrast, use an amount greater than 100%.

Negative values are not allowed.

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

Applies a drop shadow to the element. The && indicates that the order of the <color> and <length> values can be changed (i.e. you have the choice of specifying the color either first or last).

Values are as follows:

<color>? (optional)

This value determines the color of the drop shadow. It can be any valid <color> value. For example, steelblue, #FF4500 or rgba(0,0,0,0.3) are all valid colors. If this value isn't provided, the value will be taken from the color property.

<length>{2,3}

This can be either two values or three, as indicated below:

<horizontal-offset> (required)

Determines the horizontal offset of the drop shadow. It is a <length> value. For example, 10px or 1em. Negative values are allowed. If a negative value is provided, the offset will result in the drop shadow being drawn to the left of the box. If it is a positive value, it will be drawn to the right.

<vertical-offset> (required)

Determines the vertical offset of the drop shadow. It is a <length> value. For example, 10px or 1em. Negative values are allowed. If a negative value is provided, the offset will result in the drop shadow being drawn above the box. If it is a positive value, it will be drawn below.

<blur> (optional)

Determines the Gaussian blur effect (if any). It is a <length> value. If the value is zero (i.e. 0), the edge of the shadow will be sharp. The higher the value, the more blurred the shadow will become. Negative values are not allowed for a Gaussian blur.

grayscale( [ <number> | <percentage> ] )

Converts the element to grayscale. The passed parameter defines to what degree the element is converted to grayscale. A value of 100% is completely grayscale. A value of 0% leaves the element unchanged.

Negative values are not allowed.

hue-rotate( [ <angle> | <zero> ]? )

Applies a hue rotation to the element. The passed parameter defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the element unchanged.

invert( [ <number> | <percentage> ] )

Inverts the samples in the element. The passed parameter defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the element unchanged.

Negative values are not allowed.

opacity( [ <number> | <percentage> ] )

Applies transparency to the samples in the element. The passed parameter defines the proportion of the conversion. A value of 100% is completely transparent. A value of 0% leaves the element unchanged.

Negative values are not allowed.

This function is similar to the opacity property but it is not meant to be a shorthand for that property. Using filters may result in slightly better performance on some browsers. However, the two can be combined, resulting in a more transparent element.

sepia( [ <number> | <percentage> ] )

Converts the element to sepia. Sepia toning provides a reddish brown monochrome tint. It can give photos a warm, antique feeling. The passed parameter defines the proportion of the conversion. A value of 100% is completely un-saturated. A value of 0% leaves the element unchanged.

Negative values are not allowed.

saturate( [ <number> | <percentage> ] )

Saturates the element. Saturation is the colorfulness of a color relative to its own brightness. The passed parameter defines the proportion of the conversion. A value of 100% is completely un-saturated. A value of 0% leaves the element unchanged.

Negative values are not allowed.

<url>

A filter reference to a filter element. For example url(filters.svg#filter). A filter is only applied if the filter references a filter element, otherwise the whole filter chain is ignored and no filter is applied to the object.

CSS Specifications

• The filter() function is defined in Filter Effects Module Level 1 (W3C Working Draft, 18 December 2018)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.