How to achieve CSS-only image glow effect

153 Views Asked by At

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.

enter image description here

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>

1

There are 1 best solutions below

0
Filip Östermark On

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:

body {
  display: flex;
  justify-content: center;
  background-color: black;
  padding: 2rem;
}

.wrapper {
  position: relative;
  width: 250px;
  height: 250px;
}

.image,
.wrapper::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
 }

.wrapper::before {
  content: "";
  background-image: url("https://ia601706.us.archive.org/8/items/mbid-bbeded36-8d04-4b3b-8b8b-6fa2e4fec570/mbid-bbeded36-8d04-4b3b-8b8b-6fa2e4fec570-27549132408.jpg");
  background-size: cover;
  filter: blur(30px) saturate(5);
}
<div class="wrapper">
  <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>