A workaround is to use clip-path, filter and the same content twice then you will have the same result as backdrop-filter
.container {
width: 200px;
height: 200px;
position: relative;
padding:1px;
}
.container .glass, .container .filter {
background: url('https://lorempixel.com/400/200/') center/cover;
text-align:center;
color:#fff;
height:100%;
}
.filter {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
filter: contrast(4) blur(3px);
z-index: 2;
clip-path: polygon(5% 15%, 82% 30%, 83% 71%, 17% 73%);
}
<div class="container">
<div class="glass">
<h1>A title</h1>
<p>Some content Some content</p>
</div>
<div class="filter">
<h1>A title</h1>
<p>Some content Some content</p>
</div>
</div>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
