[CSS] Blurring the background on tablet/desktop mode

Ask for Help
1

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 :point_down:

Capture d’écran 2021-10-01 à 09.33.12
Capture d’écran 2021-10-01 à 09.33.12753×564 46 KB

Do you have any idea to blur only the background ?

Thanks for your help

Fabien

2

Can you specify which one are you using?

3

Sure. Here is it

/* 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>
4

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.