# CSS MessageBox

**URL:** https://community.glideapps.com/t/css-messagebox/26741
**Category:** Community Resources
**Created:** [May 13, 2021, 10:08am UTC](https://community.glideapps.com/t/css-messagebox/26741 "2021-05-13T10:08:45Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [May 19, 2021, 5:41am UTC](https://community.glideapps.com/t/css-messagebox/26741/21 "2021-05-19T05:41:35Z")

</div>

Great…now you got me playing with it…

 ![Screenshot_20210519-003711](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/f/2fc588e4742cb13c4df57d07b6def32886b50abd.jpeg) ![Screenshot_20210519-005137](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/a/4ad21c3aef50dc409fa1251c8abd59d08f5d73e6.jpeg)

---

<div class="post-metadata">

### Author: ![alfonso\_ayala](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alfonso_ayala/32/10862_2.png) [@alfonso\_ayala](https://community.glideapps.com/u/alfonso_ayala)
#### Post date: [May 19, 2021, 5:55am UTC](https://community.glideapps.com/t/css-messagebox/26741/22 "2021-05-19T05:55:16Z")

</div>

😍Could you share (semi-transparent)It looks incredible

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [May 19, 2021, 5:59am UTC](https://community.glideapps.com/t/css-messagebox/26741/23 "2021-05-19T05:59:30Z")

</div>

This is what I’m using at the moment with a few minor tweaks from @Robert_Petitto’s version and @Manu.n’s original version above:

This is the key part for the transparent and blur.

```auto
background-color: rgb(150 150 150 / 20%); 
backdrop-filter: blur(8px);

```

Full CSS:

```auto
<div style =" position: fixed;
top: 300px; 
width: 94%;
left: 5.5%;
max-width:680px;
opacity: 1;
margin-left: -10px;
height:180px;
background-color: rgb(150 150 150 / 20%); 
backdrop-filter: blur(8px);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 100%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>

<br>
<h3><font color=#000>Is everything correct?</h3>
<h1>{amount}</h1>

<a style="position: absolute; 
width:110%; 
top: -300px; 
right: 0%; 
left:-5%;
z-index:-1; 
opacity: 0;">
<div style="background-color:#aaaaaa; margin: 0%; padding:100%;z-index:-2;">

<pre><span><style>

[data-test="app-button-view"] { 
position: fixed;
top: 420px; 
margin-left:7%;
width:30%;
}

.fab-target >* {
display:none;
}

</style></span></pre>

```

---

<div class="post-metadata">

### Author: ![alfonso\_ayala](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alfonso_ayala/32/10862_2.png) [@alfonso\_ayala](https://community.glideapps.com/u/alfonso_ayala)
#### Post date: [May 19, 2021, 6:16am UTC](https://community.glideapps.com/t/css-messagebox/26741/24 "2021-05-19T06:16:12Z")

</div>

thanks men looks fantastic

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [May 19, 2021, 9:14am UTC](https://community.glideapps.com/t/css-messagebox/26741/25 "2021-05-19T09:14:32Z")

</div>

Hello @Robert_Petitto, @Jeff_Hager  
Thanks for your sharing.  
I tested your CSS and noticed a small error in the tablet preview.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/5/25711fab611a6d7aee25835e2b884eccac10f035.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/1/91873df436a0420f7841be8da202621c267e361a.png)

Unfortunately, you should not use the “left” setting for the box.  
So I made a small correction of the left-margin: -5px to align with the other objects.  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/8/68cf03d22c845aa60ec294d56430ee1da24ba182.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/e/5e32c09eda63978081dc71e6d86438b4b1803962.png)

I also add a max-width: 180px for the buttons, like this they appear to center.  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/2/d2875a655f01f7cb442c1ded19ea1128ef9a828f.png)

Here is the result with the corrections  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/3/f36e9dae3af78050c2639874fdf94592b55042dd.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/9/39df2b471f72a81aa047f70d3f72677d1bfc0ded.png)

the corrected CSS of @Robert_Petitto

```
<div style =" position: fixed;
top: 300px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:180px;
background: linear-gradient(18deg, rgba(4,59,18,1) 0%, rgb(76,176,79) 35%, rgba(0,212,255,1) 100%);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 15%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>
<br>
<h3><font color=#fff>It's a new day!</h3>
<div style="white-space: break-spaces;"><font color=#fff>Claim your dailly unicoin!
<bg>
<a style="position: fixed; 
width:100%; 
top: 0%; 
right: 0%; 
left:0%;
z-index:-1; 
opacity: .4;">
<div style="background-color:#131313; margin: 0%; padding:100%;z-index:-2;">

<pre><span><style>

   [data-test="app-button-view"] { 
position: fixed;
top: 420px; 
margin-left:0px;
left:50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width:38%;
max-width:180px;
}

.fab-target >* {
display:none;
}

</style></span></pre>

```

the corrected CSS of @Jeff_Hager

```
<div style =" position: fixed;
top: 300px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:180px;
background-color: rgb(150 150 150 / 20%); 
backdrop-filter: blur(8px);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 100%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>

<br>
<h3><font color=#000>Is everything correct</h3>
<h1>{amount}</h1>

<a style="position: absolute; 
width:110%; 
top: -300px; 
right: 0%; 
left:-5%;
z-index:-1; 
opacity: 0;">
<div style="background-color:#aaaaaa; margin: 0%; padding:100%;z-index:-2;">

<pre><span><style>

[data-test="app-button-view"] { 
position: fixed;
top: 420px; 
margin-left:7%;
width:30%;
max-width:180px;
}

.fab-target >* {
display:none;
}

</style></span></pre>
```

---

<div class="post-metadata">

### 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: [May 19, 2021, 10:12am UTC](https://community.glideapps.com/t/css-messagebox/26741/26 "2021-05-19T10:12:41Z")

</div>

Thanks all of you for taking time to do this.

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [May 19, 2021, 12:42pm UTC](https://community.glideapps.com/t/css-messagebox/26741/27 "2021-05-19T12:42:08Z")

</div>

Awesome! Thank you for the correction!

---

<div class="post-metadata">

### 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: [May 19, 2021, 1:05pm UTC](https://community.glideapps.com/t/css-messagebox/26741/28 "2021-05-19T13:05:34Z")

</div>

Thank you! My button still isn’t spaced correctly on the phone layout though.  
 ![Screen Shot 2021-05-19 at 9.05.29 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/0/70551435fa7c390c6e8db53bdc21f2ab59d44da1.png)

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [May 19, 2021, 1:07pm UTC](https://community.glideapps.com/t/css-messagebox/26741/29 "2021-05-19T13:07:40Z")

</div>

Oh darn.  
It’s on an iphone with a piece of apple on it ?

---

<div class="post-metadata">

### 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: [May 19, 2021, 1:10pm UTC](https://community.glideapps.com/t/css-messagebox/26741/30 "2021-05-19T13:10:14Z")

</div>

This seems to work:

```auto
 [data-test="app-button-view"] { 
position: fixed;
top: 420px; 
margin-left: 0px;
left:50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width:40%;
max-width:180px;
}

```

---

<div class="post-metadata">

### 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: [May 19, 2021, 1:10pm UTC](https://community.glideapps.com/t/css-messagebox/26741/31 "2021-05-19T13:10:36Z")

</div>

![Screen Shot 2021-05-19 at 9.10.24 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/7/57a6c2ceb666788babaf87ecc1a46c0ae526fc58.png)  
 ![Screen Shot 2021-05-19 at 9.10.33 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/8/385ffd69699273c9a243efeead0537326d3008ed.png)

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [May 19, 2021, 1:12pm UTC](https://community.glideapps.com/t/css-messagebox/26741/32 "2021-05-19T13:12:05Z")

</div>

Ah cool,  
Congratulations 🙂

Curious I had not seen it because I had an update bug.

---

<div class="post-metadata">

### 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: [May 19, 2021, 1:25pm UTC](https://community.glideapps.com/t/css-messagebox/26741/33 "2021-05-19T13:25:42Z")

</div>

Any chance we can make everything BUT the CSS box blurred?

---

<div class="post-metadata">

### 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: [May 19, 2021, 1:38pm UTC](https://community.glideapps.com/t/css-messagebox/26741/34 "2021-05-19T13:38:56Z")

</div>

Updating the code after each reply was like

![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/5/954599db3f6078019ba5d7f426fa43b1b64cdf0c.gif)

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [May 19, 2021, 1:45pm UTC](https://community.glideapps.com/t/css-messagebox/26741/35 "2021-05-19T13:45:32Z")

</div>

Uh, am I having a little trouble following you?  
Sorry but my English is not very good!

---

<div class="post-metadata">

### 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: [May 19, 2021, 3:08pm UTC](https://community.glideapps.com/t/css-messagebox/26741/36 "2021-05-19T15:08:49Z")

</div>

I think Bob meant blurring anything else on the screen to make the message box more visible.

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [May 19, 2021, 3:15pm UTC](https://community.glideapps.com/t/css-messagebox/26741/37 "2021-05-19T15:15:09Z")

</div>

ahh ok, I’m going to do some tests

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [May 19, 2021, 3:45pm UTC](https://community.glideapps.com/t/css-messagebox/26741/38 "2021-05-19T15:45:44Z")

</div>

1st Test,  
Well, it’s not terrible, there is still work to be done.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/8/989151894840bd6973e9ed3042c9466801164178.jpeg)

The problem is that the box is also slightly fuzzy.

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [May 19, 2021, 4:08pm UTC](https://community.glideapps.com/t/css-messagebox/26741/39 "2021-05-19T16:08:25Z")

</div>

@Robert_Petitto  
Is that what you wanted?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/5/55fdcb012ce30597b06be62d4a83cb56335d3e0c.jpeg)

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [May 19, 2021, 4:27pm UTC](https://community.glideapps.com/t/css-messagebox/26741/40 "2021-05-19T16:27:50Z")

</div>

the CSS, C’est grâce à @Jeff_Hager pour l’effet Blur.  
Please tell me if it’s ok, because now i see everything blurry 🙂

```
<!-- Blurry -->
<a style="top:180px;">
<div style="
position:fixed;
top:0px;
left:-5%;
margin: 0%; 
padding:100%;
background-color: rgb(150 150 150 / 20%); 
backdrop-filter: blur(4px);
opacity:0.8;"></style></div>

<!-- Box -->
<div style =" position: fixed;
top: 300px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:180px;
background: linear-gradient(18deg, rgba(4,59,18,1) 0%, rgb(76,176,79) 35%, rgba(0,212,255,1) 100%);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 15%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>

<!-- Text-->
<br>
<h3><font color=#000>Titre</h3>
<h1>Description</h1>

<pre><span><style>

/* Button */
[data-test="app-button-view"] { 
position: fixed;
top: 420px; 
margin-left:0px;
left:50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width:38%;
max-width:180px;
}

.fab-target >* {
display:none;
}
</style></span></pre>
```

[Previous page](https://community.glideapps.com/t/css-messagebox/26741.md?page=1)

[Next page](https://community.glideapps.com/t/css-messagebox/26741.md?page=3)