`backdropBlur` not working?
See original GitHub issueDescription
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());
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
CSS: Workaround to backdrop-filter? - Stack Overflow
i cant seem to get it to work :/ if i apply transform: translate(50%, 50%) to the blurred pseudo element, the blurred image...
Read more >Why backdrop-filter not working? : r/css - Reddit
first , I thought that it might require a background for blur filter so I added a background image but still its not...
Read more >backdrop-filter - CSS: Cascading Style Sheets - MDN Web Docs
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element.
Read more >Blur filter + opacity behind drop down menu not working
Hi, I am trying to make my sub-menu items look the same as my navigation bar. Main navigation is here. This CSS works...
Read more >`backdropBlur` not working? · Issue #210 · chakra-ui ... - GitHub
When I try to use the backdropBlur style prop, it doesn't work ... Those props all add the css var --chakra-backdrop-blur: blur(6px) to...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
To get the
backdrop*
props workbackdropFilter="auto"
need to be set too. I think this should be mentioned in the documentation 📝See updated codesandbox
It makes sense, thanks @TimKolberger.