# How to make glassmorphism ui **URL:** \ **Category:** Questions about Thunkable X\ **Created:** [June 11, 2021, 4:33am UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374 "2021-06-11T04:33:53Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\ **Post date:** [June 11, 2021, 4:33am UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/1 "2021-06-11T04:33:53Z")
how i can make glass morph ui like: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/a/1abdff0095526113705c94f355aeaaef72b5f211.png) it is hard to make if anyone has idea pls suggest ow i can make? ---
**Author:** ![ioannisroungeris](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannisroungeris/32/109459_2.png) [@ioannisroungeris](https://community.thunkable.com/u/ioannisroungeris)\ **Post date:** [December 28, 2021, 12:18pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/2 "2021-12-28T12:18:36Z")
Did you found any solution ? ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [December 28, 2021, 12:23pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/3 "2021-12-28T12:23:54Z")
Use images made by external apps and put on top of it transparent buttons for the clickable areas. ---
**Author:** ![ioannisroungeris](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannisroungeris/32/109459_2.png) [@ioannisroungeris](https://community.thunkable.com/u/ioannisroungeris)\ **Post date:** [December 28, 2021, 12:30pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/4 "2021-12-28T12:30:40Z")
okay, I will do this for the background, but what about the color of the Text that need to change from letter to letter ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [December 28, 2021, 12:36pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/5 "2021-12-28T12:36:32Z")
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. ---
**Author:** ![ioannisroungeris](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannisroungeris/32/109459_2.png) [@ioannisroungeris](https://community.thunkable.com/u/ioannisroungeris)\ **Post date:** [December 28, 2021, 12:57pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/6 "2021-12-28T12:57:14Z")
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 ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [December 28, 2021, 1:01pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/7 "2021-12-28T13:01:38Z")
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. . ---
**Author:** ![ioannisroungeris](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannisroungeris/32/109459_2.png) [@ioannisroungeris](https://community.thunkable.com/u/ioannisroungeris)\ **Post date:** [December 28, 2021, 1:12pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/8 "2021-12-28T13:12:01Z")
Yes, we would work on it and we will found out a solution. I would like to hear more about your ideas ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [December 28, 2021, 1:34pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/9 "2021-12-28T13:34:41Z")
Send me a sample of what you want and I’m certain I can crack a solution. ---
**Author:** ![mimostel](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mimostel/32/107661_2.png) [@mimostel](https://community.thunkable.com/u/mimostel)\ **Post date:** [December 28, 2021, 1:37pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/10 "2021-12-28T13:37:11Z")
If @muneer gets involved, the problem is almost solved 😊 ---
**Author:** ![ant\_1](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ant_1/32/183393_2.png) [@ant\_1](https://community.thunkable.com/u/ant_1)\ **Post date:** [December 28, 2021, 1:54pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/11 "2021-12-28T13:54:40Z")
Definitely. ---
**Author:** ![ioannisroungeris](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannisroungeris/32/109459_2.png) [@ioannisroungeris](https://community.thunkable.com/u/ioannisroungeris)\ **Post date:** [December 28, 2021, 1:55pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/12 "2021-12-28T13:55:49Z")
I will make it on Figma and I will send it to you ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [December 28, 2021, 3:08pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/13 "2021-12-28T15:08:00Z")
Will be waiting for your sample. @mimostel @ant_1 many thanks. That’s a nice end of your gift. Thank you again. ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [December 28, 2021, 9:59pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/14 "2021-12-28T21:59:39Z")
See this project demo [https://x.thunkable.com/projectPage/61cb7aa864e2cd0010c37e62](https://x.thunkable.com/projectPage/61cb7aa864e2cd0010c37e62) ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [December 29, 2021, 1:08am UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/15 "2021-12-29T01:08:31Z")
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. ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [December 29, 2021, 6:29am UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/16 "2021-12-29T06:29:31Z")
> [@jared](#): > > Could be used to create a typing effect Adding an audio file for the **click sound** could produce an old typewriter effect. ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [December 29, 2021, 7:15am UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/17 "2021-12-29T07:15:48Z")
I made a typewriter demo for someone a while ago: [https://x.thunkable.com/copy/66777011253727e2b0f50d8db74797ca](https://x.thunkable.com/copy/66777011253727e2b0f50d8db74797ca) Just need to add audio! ---
**Author:** ![ioannisroungeris](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannisroungeris/32/109459_2.png) [@ioannisroungeris](https://community.thunkable.com/u/ioannisroungeris)\ **Post date:** [December 29, 2021, 1:59pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/18 "2021-12-29T13:59:19Z")
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](https://www.figma.com/file/AVMfLoIR3DK0KD8yVvjcnz/Untitled?node-id=0:8)** > > Created with 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 ![Digital Wallet - Glassmorphism Explorations (1)](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/d/1d43fff5fbf52534588a3a41bca1520652b4c294.jpeg) ![Screenshot_20211229-115406_From Scratch](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/6/46caa04b4ae49486246d70f2bef2c3c1718e54f7.jpeg) ![Screenshot_20211229-151111_From Scratch](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/c/9c7f79531c389d4a05de658fb555d1f8f9835a7f.jpeg) 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 ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [December 29, 2021, 4:24pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/19 "2021-12-29T16:24:49Z")
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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/d/1d1ad13ec95c1fcd28bb2dba196a12ea697312c4.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/a/2a59b99a8941c0d34f75609a6aac2dd5fcc3b36c.png) With your design skills, you can, for sure, do it. ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [November 8, 2024, 1:20pm UTC](https://community.thunkable.com/t/how-to-make-glassmorphism-ui/1338374/20 "2024-11-08T13:20:19Z")