Transparent Glass CSS style only renders in debug mode
arttechleo opened this issue · 2 comments
Hellow,
I am working on a small prototype for myself and was trying to implement transparent UI for the app I am building.
The transparent glass css effect only renders in "debug=true" mode but doesn't show when debug is disabled.
I am using this snippet of code for glass effect:
/* From https://css.glass /
/ background: rgba(255,119,255, 0.3); /
background: rgba(255, 255, 255, 0.55);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
/ box-shadow: 0 0px 40px rgba( 255, 119 ,255 , 2); /
/ box-shadow: 0 4px 30px rgba( 255, 119 ,255 , 2); */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
Here is a link to the project:
https://github.com/Dinoel27/molecules
Any help or guidance would be greatly appreciated :)
Resolved on my own by using mr-div wrapping the text and adding blurry background.
hey @Dinoel27 sorry been sick all week so I'm behind on issues. Glad you figured it out! the app is looking cool, can't wait to see the final product.