# \[CSS\] Blurring the background on tablet/desktop mode

**URL:** <https://community.glideapps.com/t/css-blurring-the-background-on-tablet-desktop-mode/32534>\
**Category:** Ask for Help\
**Created:** [October 1, 2021, 7:38am UTC](https://community.glideapps.com/t/css-blurring-the-background-on-tablet-desktop-mode/32534 "2021-10-01T07:38:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fabien\_Vermot](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabien_vermot/32/5955_2.png) [@Fabien\_Vermot](https://community.glideapps.com/u/Fabien_Vermot)\
**Post date:** [October 1, 2021, 7:38am UTC](https://community.glideapps.com/t/css-blurring-the-background-on-tablet-desktop-mode/32534/1 "2021-10-01T07:38:29Z")

</div>

Hello,

I’d like to know how to blur the background on the tablet/desktop mode when a screen Edit is opened from a button, displaying like a popup or a modal. I tried the CCS code shared by @Lucas_Pires@ThinhDinh on their Notion page to build a custom modal box but the result is not the one expected.

A screenshot will be more explicit 👇

 ![Capture d’écran 2021-10-01 à 09.33.12](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/c/2c57b28f3f8bb8e618cea475f8d3a25472182bd8.png)

Do you have any idea to blur only the background ?

Thanks for your help

Fabien

---

<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:** [October 1, 2021, 8:18am UTC](https://community.glideapps.com/t/css-blurring-the-background-on-tablet-desktop-mode/32534/2 "2021-10-01T08:18:47Z")

</div>

Can you specify which one are you using?

---

<div class="post-metadata">

**Author:** ![Fabien\_Vermot](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabien_vermot/32/5955_2.png) [@Fabien\_Vermot](https://community.glideapps.com/u/Fabien_Vermot)\
**Post date:** [October 1, 2021, 8:32am UTC](https://community.glideapps.com/t/css-blurring-the-background-on-tablet-desktop-mode/32534/3 "2021-10-01T08:32:37Z")

</div>

Sure. Here is it

```auto
/* Blurry */
<a style="top:180px;">
<div style="
position:fixed;
top:0px;
left:-5%;
margin: 0%; 
padding:100vh;
background-color: rgb(0 0 0 / 70%); 
backdrop-filter: blur(4px);">
</style></div></a>

```

---

<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:** [October 1, 2021, 8:53am UTC](https://community.glideapps.com/t/css-blurring-the-background-on-tablet-desktop-mode/32534/4 "2021-10-01T08:53:18Z")

</div>

I don’t think I have an answer for this. What we are trying to do here is putting a blurry background on top of what we are already have, I have tried using z-index specifically on that edit modal to put it on top of the background but it just doesn’t work.