Can Appsheet create Glassmorphism effects like Figma?

​​Gemini said, “Yes, it can. Let me show you.”

Hi everyone! I’m still a beginner here, but I wanted to share some SVG code I’ve been working on, specifically regarding the Glassmorphism effect.

​I’m certainly no SVG expert. To me, SVG is like a bus, and Gemini AI is the driver. I don’t really know how to build or drive the bus (SVG) myself; I just use it as my transportation. So, I asked the driver (Gemini AI): “Can AppSheet handle a Glassmorphism effect?”

​Gemini said, “Yes, it can. Let me show you.”

​So, here is my experience bringing Glassmorphism to life in AppSheet with the help of Gemini AI. Why did I choose this effect? Just search for “Glassmorphism” and you’ll see how modern and sleek it looks.

:small_orange_diamond:​If you don’t like me: Download it anyway. You might change your mind after seeing the results!

:small_orange_diamond:​If you prefer “basic” designs: Download it anyway. This might be the thing that makes you fall in love with “extraordinary” UI.

:small_orange_diamond:​If you aren’t a fan of AppSheet: Download it anyway. This might just be the reason you start liking it!

Figma can create Glassmorphism, and as it turns out, AppSheet can too. Use Gemini AI to push the boundaries of what’s possible in AppSheet UI.

For mobile app

9 Likes

Please move this post to the Tips and Tricks area.

Very nice effect! There are many things that can be accomplished with SVG’s. Search for “SVG” in the Tips and Tricks areas for other such examples.

4 Likes

Yes, you are sharing some nice SVG implementations.

If possible, if the app does not have any confidential data, you may want to consider publishing your app as a public sample app. Currently it seems to be in just browse mode for the community.

Making it public app if possible, will be a better option for a better reach. This is so because then community will know the thoughtsr and finer points in the SVG implementation in the sample app. This will help the community to adapt to your SVG creation principles or logic at a faster pace.

4 Likes

I like your post, you shared app, and your text even more :grinning_face_with_smiling_eyes: :+1: especially the interesting yet funny three bulletpoints of the “callable” point of view.

3 Likes

​Thanka @WillowMobileSys It’s not just about the Glassmorphism effect—the coolest part is that it can actually be animated too. That was honestly beyond my expectations

2 Likes

Thanks @Suvrutt_Gurjar for the suggestion, . That’s a great idea. Since I’m on a free plan, I’ll set it up as a copyable sample app. This way, the community can still explore the formulas without any deployment issues.

3 Likes

"Thanks @Minhku Which one do you like more, the Glassmorphism effect or the animation? I was shocked myself—you just copy the code, and the animation runs instantly.

1 Like

I have been introduced to the Glassmorphism since your previous posts. But yeah indeed I was amazed as well when i saw the animation running on the screen.

Especially i like this one very much. If you dont mind, would you please share the svg code for this one?

1 Like

@Minhku Look in the virtual column with the name APPSHEET in the show (content) type. That’s the SVG code.

1 Like

I dont think your shared app is cloneable. So i cannot get in the editor within your app. :frowning:

2 Likes

CONCATENATE(
“data:image/svg+xml;utf8,2026APPSHEET”)

CONCATENATE(
“data:image/svg+xml;utf8,2026APPSHEET”)

CONCATENATE(
“data:image/svg+xml;utf8,



















2026


APPSHEET
”)

Yes, some of the examples I eluded to show animated SVG’s. You can also use GIF’s.

3 Likes

I always don’t get a very nice interface for my App sheet , but after reading and trying this, it’s a :100: for me

3 Likes

Thanks @leo_saed ..

1 Like

This is a great resource. Thank you!

May I ask for recommendations regarding the size for SVGs for proper display in Appsheet Desktop?

1 Like

Oke thanks @Kem_Ave