B4J Question How to make a Glassmorphism effect for B4J desktop app?

kimstudio

Active Member
Licensed User
Longtime User
How to make a Glassmorphism effect for B4J desktop app (B4A)? There are some forum discussions on this in 2014.
It seems that there are some challenges to get the background image and blur it fast.

Hope @Mashiane doesn't mind for the following capture:

 

alwaysbusy

Expert
Licensed User
Longtime User
A glass effect in CSS on the web is pretty simple. I believe in B4J one can also use CSS to do some styling so this may help.

B4X:
background: rgba(255, 255, 255, 0.2); ' <---- must have some transparency, e.g. here it is 0.2
backdrop-filter: blur(4px); ' <--- the blurring effect in px

Alwaysbusy
 
Last edited:
Upvote 0

kimstudio

Active Member
Licensed User
Longtime User
Thanks alwaysbusy.

It seems Javafx doesn't support backdrop-filter: blur(4px):

B4X:
LOG:
WARNING: CSS Error parsing '*{-fx-background-color:rgba(255,255,255,0.50);
-fx-border-color:#F0FFFF;
-fx-border-radius:10.00;-fx-background-radius:10.00;-fx-border-width:1.00;backdrop-filter: blur(4px);}: Unexpected function 'blur(' while parsing 'backdrop-filter' at [3,91]
 
Upvote 0

aeric

Expert
Licensed User
Longtime User
 
Upvote 0
Cookies are required to use this site. You must accept them to continue using the site. Learn more…