I have achieved an image glow effect that I like by adding a copy of the image itself in html, as well as blurring and saturating it using CSS filters. However, ideally I would like to achieve the same result without adding the extra html element (i.e. the blurred/saturated image), since it is essentially just a style that I apply to the foreground image. Is this possible? See example of this effect below.
body {
display: flex;
justify-content: center;
background-color: black;
color: white;
padding: 2rem;
}
.wrapper {
position: relative;
width: 250px;
height: 250px;
}
.glow,
.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
border-radius: 10px;
}
.glow {
filter: blur(30px) saturate(5);
}
<div class="wrapper">
<img class="glow" src="https://ia601706.us.archive.org/8/items/mbid-bbeded36-8d04-4b3b-8b8b-6fa2e4fec570/mbid-bbeded36-8d04-4b3b-8b8b-6fa2e4fec570-27549132408.jpg" />
<img class="image" src="https://ia601706.us.archive.org/8/items/mbid-bbeded36-8d04-4b3b-8b8b-6fa2e4fec570/mbid-bbeded36-8d04-4b3b-8b8b-6fa2e4fec570-27549132408.jpg" />
</div>

Managed to achieve this using a pseudo element (thank you CBroe!) Here is the solution for now. The extra HTML img tag is no longer required: