`backdropBlur` not working?

Description

When I try to use the backdropBlur style prop, it doesn’t work

Link to Reproduction

https://codesandbox.io/s/elated-bell-668t4?file=/src/index.js

Steps to reproduce

Those props all add the css var --chakra-backdrop-blur: blur(6px) to the element but not background-filter;

backdropBlur="6px"
sx={{ backdropBlur: "6px" }}
__css={{ backdropBlur: "6px" }}

Setting the filter directly worked though.

css={{ backdropFilter: "blur(6px)" }}

Chakra UI Version

1.7.4

Browser

Chrome 96

Operating System

• macOS
• Windows
• Linux

Additional Information

The only reference I found of backdropBlur in the documentation was in this changelog https://chakra-ui.com/changelog#17-05-2021

PS: Is there a better way to “transparentize” a color that in my example?

const theme = useTheme();
const bg = transparentize(theme.colors.gray[800], 0.8)(useTheme());

[TimKolberger]

To get the backdrop* props work backdropFilter="auto" need to be set too. I think this should be mentioned in the documentation 📝

<Box p="4" bg="blackAlpha.800" backdropFilter="auto" backdropBlur="6px">
    <code>backdropFilter="auto" backdropBlur="6px"</code>
</Box>

See updated codesandbox

[Calvein]

It makes sense, thanks @TimKolberger.