GlassMorphism
Effect inside the HVArrangement.
Applies the Glass Morphism effect inside the Arrangement.
arrangement: HVArrangement to which the effect will be applied.
Sets the corner radius in pixels.
radius: Corner radius in pixels.
Sets the blur amount for the background filter in pixels.
blur: Blur amount in pixels.
Sets the border color. Example: 'rgba(255, 255, 255, 0.3)'.
color: The border color in rgba format.
Border width.
width: Border width in pixels.
Sets the background color. Example: 'rgba(255, 255, 255, 0.2)'.
color: The background color in rgba format.
GlassMorphism.aia (1.6 MB)
joejsanz.joedevglassmorphism.aix (5.9 KB)
Thanks.
10 Likes
TIMAI2
December 26, 2024, 11:40pm
2
Well done Joe. An update on what I had to do to achieve the same effect...
Make a blurred semi transparent image, and apply it to your component. There may be extensions that enhance arrangements that can help with the appearance.
1 Like
Thanks a lot Tim
Yes I saw it, it is more complicated but it is a very good result, I liked your work and what you used to achieve it.
What I did was use a web viewer built into an arrangement for more control with customization and embed html and css in that web viewer.
1 Like
minjea
June 25, 2025, 1:22am
4
Other than function activation, other additional settings are not working (e.g., edge, amount of blur, height, etc.)
Peter
June 25, 2025, 2:51am
5
Show what you did and what the result was.
minjea:
not working
Try this project and tell me if it works for you.
GlassMorphismTest.aia (1.6 MB)
minjea
June 25, 2025, 6:35am
7
It works well with the project you sent me. I simply set it like that, like the picture. I don't think I know how to use it. It doesn't work because the project you gave me did the way I set it.
minjea:
It doesn't work
You need to put the ApplyGlassMorphism function at the bottom
1 Like
minjea
June 25, 2025, 6:46am
9
I just noticed that it is a difference in order as I tested it. I solved it. Thank you for your help.
1 Like
i downloaded this file and unfortunately its different on the post theres no glassmorphism effect on the hv arrangement.
Here is an example of the order of the blocks, the properties come before the ApplyGlassMorphism block:
In this version of the extension only updates the icon and the minSdk: 21 and compiled with Fast v5.2.0.
Nothing else has been added, but you can try it and see if it works for you.
