how i can make glass morph ui
like:
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 
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 @ant_1 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
