https://codepen.io/tretretef/pen/vYzxpXa
<div class="blur"></div>
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png" />
physique {
margin: 0px;
padding: 0px;
}
img {
place: absolute;
z-index: 1;
}
.blur {
place: absolute;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
width: 1920px;
peak: 1080px;
z-index: 2;
}
I’ve a picture with -webkit-backdrop-filter: blur() that works positive on most browsers, together with Safari on iOS, however not on macOS. I am utilizing Safari 15 macOS Monterey and iPhone XR for testing.
That is the way it seems to be like in Chrome, Firefox, Edge, and most browsers.
That is the way it seems to be like on macOS. You’ll be able to’t see the picture, solely a grey background.
That is iPhone, works positive.
A method I can consider fixing it’s utilizing a blurry clear picture and placing it on high of the picture and under the hero textual content. I may additionally edit the picture itself, however I might have to do this each time I must replace the picture. Not superb. Is not there a technique to obtain this utilizing CSS?
