Volumetrics-io/mrjs

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

Frame 5
Frame 4

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.