How to make glassmorphism ui

[eko.devs.apploroceo]

how i can make glass morph ui
like:

it is hard to make if anyone has idea pls suggest ow i can make?

[ioannisroungeris]

Did you found any solution ?

[muneer]

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

[ioannisroungeris]

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

[jared]

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.

[ioannisroungeris]

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

[jared]

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. .

[ioannisroungeris]

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

[muneer]

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

[mimostel]

If @muneer gets involved, the problem is almost solved

[ant_1]

Definitely.

[ioannisroungeris]

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

[muneer]

Will be waiting for your sample.

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

[muneer]

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

[jared]

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.

[muneer]

@jared

Could be used to create a typing effect

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

[tatiang]

I made a typewriter demo for someone a while ago:

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

Just need to add audio!

[ioannisroungeris]

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

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

[muneer]

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

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