CSS "Glass Shadow" Effect - html

Question

I'm trying to achieve this shadow effect, where the shadow is like a blurred version of the image itself:
I was able to achieve it by stacking the same image twice and applying filter: blur(20px) to the one under, but that feels like an inefficient way of doing it:
.cover-wrapper {
position: relative;
margin: 50px;
width: 200px;
height: 200px;
}
.cover {
z-index: 1;
border-radius: 10px;
position: absolute;
width: 200px;
height: 200px;
}
.cover-shadow-wrapper {
position: absolute;
filter: blur(20px);
overflow: hidden;
height: 200px;
width: 200px;
}
.cover-shadow {
transform: scale(1.5)
}
<div class="cover-wrapper">
<img src="https://picsum.photos/200/200?image=871" alt="cover" class="cover">
<div class="cover-shadow-wrapper">
<img src="https://picsum.photos/200/200?image=871" alt="shadow" class="cover-shadow">
</div>
</div>
Is there a more efficient way of doing this? Also, what is this effect actually called?

Answer 1

does it have to be an image tag?
you can use a single div and its ::after pesudo, give them both the same background image and attributes, then blur the ::after, you'd have a single element in html which is simpler
.glassy-img, .glassy-img::after {
background-image: url(https://picsum.photos/200/200?image=871);
border-radius: 10px;
background-size: cover;
background-position: center;
width: 200px;
height: 200px;
}
.glassy-img::after {
content: '';
filter: blur(20px);
display: block;
position: relative;
z-index: -1;
}
<div class="glassy-img"></div>