filter: drop-shadow() on grouped img & div

by Mike Jacobson

HTML

<div class="group">
	<div class="rounded-rectangle"></div>
	<img src="https://cdn.imgpaste.net/2021/01/12/U0oK2.png"/>
</div>

CSS

.group {
  margin-top: 30px;
  filter: drop-shadow(20px 10px 1px rgba(0, 0, 0, 0.432));
}

.group img {
  position: absolute;
  top: -30px;
  height: inherit;
  width: 150px;
}

.rounded-rectangle {
  background-color: blue;
  width: 100px;
  height: 100px;
}