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>
And you can create a jQuery script that will duplicate the content for you when it will come to a lot of content. You may also consider a more complex script to adjust all the needed value and parameter.
$('.backdrop').each(function() {
var e = $(this).html();
$(this).append('<div class="filter">'+e+'</div>');
})
.container {
width: 200px;
height: 200px;
position: relative;
padding:1px;
display:inline-block;
}
.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%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container backdrop">
<div class="glass">
<h1>A title</h1>
<p>Some content Some content</p>
</div>
</div>
<div class="container">
<div class="glass">
<h1>A title</h1>
<p>Some content Some content</p>
</div>
</div>