How to make glassmorphism ui

how i can make glass morph ui
like:
image
it is hard to make if anyone has idea pls suggest ow i can make?

1 Like

Did you found any solution ?

2 Likes

Use images made by external apps and put on top of it transparent buttons for the clickable areas.

1 Like

okay, I will do this for the background, but what about the color of the Text that need to change from letter to letter

2 Likes

Make a text component in Figma Or pixlr and then import the text image.

We don’t have a built in way to apply gradients to text labels. ^^good feature request though.

1 Like

Is a nice idea but I need to create a Data Viewer List Component so importing images and text from figma as a png will not work

1 Like

If you wanna work on it sometime, I bet we could work something out! Sounds like a fun challenge to tackle!

I have some ideas, anyways. .

1 Like

Yes, we would work on it and we will found out a solution. I would like to hear more about your ideas

3 Likes

Send me a sample of what you want and I’m certain I can crack a solution.

3 Likes

If @muneer gets involved, the problem is almost solved :blush:

3 Likes

Definitely.

1 Like

I will make it on Figma and I will send it to you

3 Likes

Will be waiting for your sample.

@mimostel @codelover1234 many thanks. That’s a nice end of your gift. Thank you again.

3 Likes

See this project demo
https://x.thunkable.com/projectPage/61cb7aa864e2cd0010c37e62

2 Likes

This is really cool! This idea can be extended. Could be used to create a typing effect too if you introduce short pauses between letters.

2 Likes

Adding an audio file for the click sound could produce an old typewriter effect.

2 Likes

I made a typewriter demo for someone a while ago:

https://x.thunkable.com/copy/66777011253727e2b0f50d8db74797ca

Just need to add audio!

3 Likes

Hey, thank you for spending time finding a solution!
The thing is that I am trying to give a glassmorphism design to my app so is more about the background colors and Layouts and not just the changing color effect.
So as you can see on the image on the left is this design that I have created on Figma

And on the other 2 images is screenshots, how it is now the app built on Thunkable.
The bleu buttons are imported from Figma as @jared advice

I would like to ask you if you know how to make the “glass” background that is on Mockups to Thunkable
And as you can see in the first screen I am using a Custom Data Viewer Grid and a Custom Data Viewer List but do you have any idea on how to create a Custom Layout for both that is more close to the Figma
Any other advice will also be appreciated

2 Likes

I have to admit I need more courses when it comes to design.

This is my attempt using a custom layout for the Data Viewer List and some crude cut and paste to reproduce your group design in Figma

image

With your design skills, you can, for sure, do it.

1 Like