CSS "Glass Shadow" Effect

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)
}

Is there a more efficient way of doing this? Also, what is this effect actually called?

user_7892014 · Answer

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;
}

CSS "Glass Shadow" Effect

1 Answers