Advertisement

Multiple drop Shadow in Html Code

Advertisement
<div class="parent-element">
  <div class="clipped-element"></div>
</div>

Multiple drop Shadow in Css Code

Advertisement
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 3rem;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent-element {
  filter: drop-shadow(10rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(-10rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(20rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(-20rem 0 0 rgba(0, 30, 200, 0.8));
  transition: filter 600ms;
}

.parent-element:hover {
  filter: drop-shadow(0 0 0 rgba(0, 30, 200, 0.8));
}

.clipped-element {
  width: 20rem;
  height: 20rem;
  margin: 0 auto;
  background-color: deeppink;
  clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%)
}