backdrop-filter

Reference for the backdrop-filter CSS property.

Abbreviation

bdf

Full Property

backdropFilter

Type

Variables

When using a property with a semantic value like bdf-<token>, Maple generates a variable fallback chain depending on the type of the property.

Replace <token> with the value segment after the dash in your utility class.

The chain is evaluated from left to right, using the first defined variable and falling through to the next variable or default.

Value Resolution

The property resolves its semantic token before falling back to the literal value.

Custom value

Resolves the semantic token for this property.

--bdf-<token>Most Specific

--<token>

<token>Default

blur (bdblur)

Resolution for the bdblur utility class.

blur value

Resolves the semantic token for blur.

--blur-<token>Most Specific

--space-<token>

--<token>

<token>Default

brightness (bdbrightness)

Resolution for the bdbrightness utility class.

brightness value

Resolves the semantic token for brightness.

--brightness-<token>Most Specific

--<token>

<token>Default

contrast (bdcontrast)

Resolution for the bdcontrast utility class.

contrast value

Resolves the semantic token for contrast.

--contrast-<token>Most Specific

--<token>

<token>Default

drop-shadow (bdshadow)

Resolution for the bdshadow utility class.

drop-shadow value

Resolves the semantic token for drop-shadow.

--dshadow-<token>Most Specific

--shadow-<token>

--<token>

<token>Default

grayscale (bdgrayscale)

Resolution for the bdgrayscale utility class.

grayscale value

Resolves the semantic token for grayscale.

--grayscale-<token>Most Specific

--<token>

<token>Default

hue-rotate (bdhue)

Resolution for the bdhue utility class.

hue-rotate value

Resolves the semantic token for hue-rotate.

--hue-<token>Most Specific

--angle-<token>

--<token>

<token>Default

invert (bdinvert)

Resolution for the bdinvert utility class.

invert value

Resolves the semantic token for invert.

--invert-<token>Most Specific

--<token>

<token>Default

saturate (bdsaturate)

Resolution for the bdsaturate utility class.

saturate value

Resolves the semantic token for saturate.

--saturate-<token>Most Specific

--<token>

<token>Default

sepia (bdsepia)

Resolution for the bdsepia utility class.

sepia value

Resolves the semantic token for sepia.

--sepia-<token>Most Specific

--<token>

<token>Default