is it possible to hide the png image but keep the drop shadow by css?

Question

I have a png photo. "Filter: drop-shadow" worked well with my png photo. However, I want to hide my png photo and keep the shadow.

I tried to set the value of translate and drop-shadow x-axis to achieve. The below CSS code worked.

Also, I think it is possible to achieve it by using photoshop. However, is it possible to hide the png image by CSS directly?

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --distance: 100vw;
}

.photo {
  width: 100%;
  filter: drop-shadow(var(--distance) 10px 5px #ff0000);
  position: relative;
  display: block;
  transform: translate(-100%, 0%);
}

user_3411426 · Answer

As user @Behrouz mentioned. Just have the img inside a div with a drop shadow. Here is a snippet below. You can see the drop shadow stays even if there is no image. Just edit the box-shadow property to your liking.

.photo-shadow { 
width: 300px;
height: 300px;
box-shadow: 5px 5px 5px rgba(0,0,0, 0.6);
margin-bottom: 20px;
}

is it possible to hide the png image but keep the drop shadow by css?

1 Answers