# Ok, I'm fan of Glassmorphism in dark mode, any chance I can do this? **URL:** \ **Category:** Ask for Help\ **Created:** [October 5, 2021, 3:12pm UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689 "2021-10-05T15:12:30Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\ **Post date:** [October 5, 2021, 3:12pm UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/1 "2021-10-05T15:12:30Z")
Hi, guys 🌸I found that CSS can create glassmorphism, which is cool, as you can set up everything from exact color to opacity, size, outline. And I assume + performant and less work than loading Figma or any tool to create just a rectangle in glassmorphism until it’s right. Especially if you have no skills whatsoever as graphist/designer. Thus said 😁… Can I achieve this? This is a simulation with hint component (which I love it really looks like glassmorphism already) and spaces. My idea is to design a glassmorph door that covers almost the whole background over a background image (OK) and a black background (OK), with an impression the contour is glowing (well, like a door at night, with the light on to show there must be indoor “presence”. Or a magic box). I found this ​/\* From [https://css.glass](https://css.glass/) \*/ background: rgba(143, 96, 114, 0.14); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(143, 96, 114, 1); THIS IS THE RESULT I WANT for the door (opacity, blur, color) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/a/aaff7ad60713a810ad686df483e42deaff058cc5.jpeg) And my capture below simulating sth close (yeah, not sure the Indiana Jones hat can manage to go over the door) from the default hint component (so no opacity, no blur, no custom color) to give you an idea of how it covers the screen. I know this is Madness, but there must be Method in it 😉 💀(From a crazy Brit guy called William S.) What say you? Doable? Waste of Time? Thks anyway 🌸 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/e/8e43022055ab3c74a25b1b801544576ce7c04c2f.jpeg) ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [October 5, 2021, 11:44pm UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/2 "2021-10-05T23:44:54Z")
I’m not sure I understand this 100%, so you want a component that imitates a glass door that covers the whole screen? ---
**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\ **Post date:** [October 6, 2021, 12:12am UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/3 "2021-10-06T00:12:17Z")
Glassmorphism with CSS. I have never heard of this, it’s fun! For experimental purposes and to push the current limits of Glide: why not use CSS and experiment as much as possible! What’s being done in Glide with css is impressive. To build an app for work that brings tremendous value to a business: I think CSS might be unnecessary and it might even become a distraction to the builder more than anything. ---
**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\ **Post date:** [October 6, 2021, 12:59am UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/4 "2021-10-06T00:59:39Z")
@Pedroydzito new challenge. Can you achieve it? ---
**Author:** ![Pedroydzito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedroydzito/32/85187_2.png) [@Pedroydzito](https://community.glideapps.com/u/Pedroydzito)\ **Post date:** [October 6, 2021, 1:05am UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/5 "2021-10-06T01:05:56Z")
Maybe, i can try! 🕶 ---
**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\ **Post date:** [October 6, 2021, 4:56am UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/6 "2021-10-06T04:56:13Z")
Thks, ThinhDinh 🙂. I want anything that displays like a rectangle that covers almost full screen in glassmorphism with configurable color, size, blur, opacity, border color bonus: glowing in background It does not matter whether it’s a hack of a hint, a button, any object. I don’t know if No Code are supposed to allow various shapes to customize UI/UX, but it would open many possibilities. If not, I’ll have to create a background image, which is the hard way, less smart, less flexible, longer to load? ---
**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\ **Post date:** [October 6, 2021, 5:05am UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/7 "2021-10-06T05:05:04Z")
Thks, Nat 🌸🙂. Well, I’m no designer, but Design trends matter to keep pace with user’s affordance requirements, so customers’ as well. They’re no longer impressed by mobile apps. They know how to use them. If your app has great features but poor and “interchangeable” look, it may seem like a comfort zone to make it “user-friendly” with very standard UI, but “le revers de la médaille” can also to lose users’ interest. Especially if I target educational, recreative purposes. Dark mode, glassmorphism, aurora borealis / northern light gradients belong to the trends that agree with the personality I want to express in my apps. For the humanity, the privileged intimacy they inspire. So the essence of what triggers customer to CTA in the 1st place: primary emotions. All the features are for the brain. All the pleasure is for the heart. And the heart of any user, customer, is still: human. ---
**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\ **Post date:** [October 6, 2021, 5:13am UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/8 "2021-10-06T05:13:24Z")
Thks, Lucas 🌸 Yes, Please! @Pedroydzito 🌸🙂 From my educated guess, maybe you can only hack with CSS only existing objects like components, not to introduce a shape like a rectangle out of nowhere. So maybe it can be a hack of the hint, the button component that can be in the background and accept many or all of the CSS. Maybe we have to use an image after all. But maybe it could be just a tiny blank image to get css sth to target? Anyway, enjoy! ---
**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\ **Post date:** [October 6, 2021, 5:18am UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/9 "2021-10-06T05:18:07Z")
Thks, Pedro! May all the Muses amuse you! Should you come up with sth else, please let us know. I wish you the best tests. If it’s a no go, well, so be it 🙂 Bonne chance! Good Luck! ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [October 6, 2021, 8:49am UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/10 "2021-10-06T08:49:21Z")
You don’t necessarily have to restrict your self to existing objects, you can write HTML then customize it with CSS in the rich text component. ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [October 6, 2021, 10:19am UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/11 "2021-10-06T10:19:04Z")
Seems like this should get you halfway there: > [@CSS MessageBox](https://community.glideapps.com/t/css-messagebox/26741): > > Hello, I needed a MessageBox, and since it doesn’t exist in glide, I did it with CSS. You can adapt it to your needs. For the demo, click on the “floating button” to make it appear. When the “MsgBox” is visible, you normally can’t click anything else. Here is a small demo application. EDIT : I retrieve a part of CSS in the community (but I no longer have the author), I just adapted with buttons. ---
**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\ **Post date:** [October 6, 2021, 11:45am UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/12 "2021-10-06T11:45:34Z")
Whohoho! The whole thread looks very promising, indeed. I’ve copied the @Jeff_Hager + @Manu.n + You @Robert_Petitto CSS and I already got a box as bcg. There should be nothing to stop me from getting what I want. Even the border, the radius, the bonus shadow, and who knows, the glowing? 💜🌸✔ Merci, Robert ! (and all the guys in the topic). Can’t wait to work on this. On 1st try, my floating button completely disappears. Ouch that hurts! I hope it’s not incompatible. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [October 6, 2021, 12:01pm UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/13 "2021-10-06T12:01:49Z")
> [@L.M](#): > > On 1st try, my floating button completely disappears. Ouch that hurts! I hope it’s not incompatible. When I recently implemented these modals, I had the same issue. Managed to fix that with the following: ```auto z-index:1 !important; ``` ---
**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\ **Post date:** [October 6, 2021, 12:16pm UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/14 "2021-10-06T12:16:29Z")
Oh LOL, @Darren_Alderman, so you have to hard code the floating to help it float above the crowd? How Funny! 😄 It’s like telling so what s.he’s expected to do when it’s in his/her job description! Thks! Ach, too bad I can’t work on it now ☹ ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [October 6, 2021, 12:19pm UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/15 "2021-10-06T12:19:01Z")
That’s actually for the button which sits inside the modal. The z-index brings it to the front so it doesn’t get hidden underneath. ---
**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\ **Post date:** [October 6, 2021, 3:01pm UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/16 "2021-10-06T15:01:39Z")
Can you see my loom? @ThinhDinh @Lucas_Pires @Robert_Petitto @Darren_Murphy@nathanaelb ? Thks everybody! @Manu.n @Jeff_Hager (have I forgotten anyone?) Argh, the video is too cropped, you don’t see the light under the door! You have to move you mouse on the video to unhide the bottom. The video quality is not so good in Loom. Can I enhance it? ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/a/ba6ef3228e9c1ae075ec302eeff8c114df76405d.jpeg) ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [October 6, 2021, 3:05pm UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/17 "2021-10-06T15:05:55Z")
Very nice, well done 👍 ---
**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\ **Post date:** [October 6, 2021, 3:12pm UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/19 "2021-10-06T15:12:13Z")
🤩🥰😁😋✨ ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [October 6, 2021, 3:19pm UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/20 "2021-10-06T15:19:47Z")
Well done! ---
**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\ **Post date:** [October 6, 2021, 3:21pm UTC](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689/21 "2021-10-06T15:21:27Z")
Gnaw 😁🌸💗 Thank U! Lucky me to have you all! [Next page](https://community.glideapps.com/t/ok-im-fan-of-glassmorphism-in-dark-mode-any-chance-i-can-do-this/32689.md?page=2)