backdrop-filter
Description
The backdrop-filter property for CSS specifies a filter to the area behind the element.
Syntax
CSS
backdrop-filter: value;
JS
object.style.backdropFilter = "value";
Values
<'backdrop-filter'> = none | <filter-value-list>
none
No filter effect applied.
<filter-value-list> = [ <filter-function> | <url> ]+
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>
<blur()> = blur( <length>? )
blur()
Applies a Gaussian blur to the input image.
<length>
Specifies the length using a number followed by a unit of measurement.
<brightness()> = brightness( <number-percentage>? )
brightness()
Applies a linear multiplier to input image, making it appear more or less bright.
<number-percentage> = [ <number> | <percentage> ]
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<contrast()> = contrast( <number-percentage>? )
contrast()
Adjusts the contrast of the input.
<number-percentage> = [ <number> | <percentage> ]
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<drop-shadow()> = drop-shadow( <color>? && <length>{2,3} )drop-shadow()
Applies a drop shadow effect to the input image.
<color>
Specifies the color using a keyword or a numerical specification.
<length>
Specifies the length using a number followed by a unit of measurement.
<grayscale()> = grayscale( <number-percentage>? )
grayscale()
Converts the input image to grayscale.
<number-percentage> = [ <number> | <percentage> ]
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<hue-rotate()> = hue-rotate( [ <angle> | <zero> ]? )
hue-rotate()
Applies a hue rotation on the input image.
<angle>
deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
rad
Radians. There are 2p radians in a full circle.
turn
Turns. There is 1 turn in a full circle.
<zero>
Represents a literal number with the value 0.
<invert()> = invert( <number-percentage>? )
invert()
Inverts the samples in the input image.
<number-percentage> = [ <number> | <percentage> ]
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<opacity()> = opacity( <number-percentage>? )
opacity()
Applies transparency to the samples in the input image.
<number-percentage> = [ <number> | <percentage> ]
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<sepia()> = sepia( <number-percentage>? )
sepia()
Converts the input image to sepia.
<number-percentage> = [ <number> | <percentage> ]
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<saturate()> = saturate( <number-percentage>? )
saturate()
Saturates the input image.
<number-percentage> = [ <number> | <percentage> ]
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<url> = url( <string> <url-modifier>* )
<string>
Specifies a sequence of characters delimited by double quotes (") or single quotes (').
<url-modifier>
Changes the meaning or the interpretation of the URL.
Initial
none
