CODEWITHSUNDEEP
htmlcss
glocore
glocore

Reputation: 2164

CSS "Glass Shadow" Effect

I'm trying to achieve this shadow effect, where the shadow is like a blurred version of the image itself:

enter image description here

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?

Upvotes: 5

Views: 1033

Answers (1)

Kareem Kamal
Kareem Kamal

Reputation: 1048

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>

Upvotes: 8

Related Questions