Why is my drop-shadow not working on parent element?

Question

I'm making an origami butterfly, placing trapezoid shapes on top of others, to create an illusion of folded paper. However, for some reason, the filter:drop-shadow is not working on the clip-path part-1 and part-2, even though I have wrapped around them the wrapper parents and applied drop shadow there.

I have trouble figuring this out. Appreciate any help. Thank you!

* {
  box-sizing: border-box;
}

body {
  background: #f1f1f1;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.frame {
  width: 65vw;
  height: 65vw;
  border-radius: 50%;
  border: 5px solid white;
  box-shadow: 1px 1px 13px 2px #5d5d5d30;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transform: translateY(3vw);
  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}

.holder {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
}

.part-1-wrap {
  filter: drop-shadow(9px 5px 10px rgba(black, 0.2)) drop-shadow(-9px 5px 10px rgba(black, 0.2));
  position: absolute;
  left: 0vw;
  top: 0vw;
  z-index: 6;
}

.part-1 {
  clip-path: polygon(0% 0%, 67.3% 2.5%, 77% 100%, 35.1% 88.8%);
  background: #da1f1f;
  width: 35vw;
  height: 16vw;
  position: absolute;
  top: 20vw;
  left: 6vw;
  transform: rotate(15deg);
}

.part-2-wrap {
  filter: drop-shadow(9px 5px 10px rgba(black, 0.2)) drop-shadow(-9px 5px 10px rgba(black, 0.2));
  position: absolute;
  left: 0vw;
  top: 0vw;
  z-index: 3;
}

.part-2 {
  clip-path: polygon(0% 0%, 67.3% 2.5%, 77% 100%, 35.1% 88.8%);
  background: #da1f1f;
  width: 35vw;
  height: 16vw;
  position: absolute;
  top: 20vw;
  left: 22vw;
  transform: scaleX(-1) rotate(15deg);
}

<div class="frame">
  <div class="holder">
    <div class="part-1-wrap">
      <div class="part-1"></div>
    </div>
    <div class="part-2-wrap">
      <div class="part-2"></div>
    </div>
    <div class="part-3-wrap">
      <div class="part-3"></div>
    </div>
    <div class="part-4-wrap">
      <div class="part-4"></div>
    </div>
    <div class="part-5-wrap">
      <div class="part-5"></div>
    </div>
  </div>
</div>

Answer 1

rgba takes 4 parameters (RED, GREEN, BLUE, ALPHA)

You used it like this:

  filter: drop-shadow(9px 5px 10px rgba(black, 0.2)) drop-shadow(-9px 5px 10px rgba(black, 0.2));

Also using two drop-shadow will take the total sum of them, you won't have two shadows.

for example :

filter: drop-shadow(9px 5px 10px rgba(0,0,0,0.5)) drop-shadow(-9px -5px -10px rgba(0,0,0,0.5));

This will make no shadow at all.

You should use one drop shadow per element like this:

filter: drop-shadow(9px 5px 10px rgba(0,0,0,0.5));

Check the snippet:

Note that I changed 0.2 to 0.8 to see the effect.

* {
  box-sizing: border-box;
}

body {
  background: #f1f1f1;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.frame {
  width: 65vw;
  height: 65vw;
  border-radius: 50%;
  border: 5px solid white;
  box-shadow: 1px 1px 13px 2px #5d5d5d30;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transform: translateY(3vw);
  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}

.holder {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
}

.part-1-wrap {
  filter: drop-shadow(9px 5px 10px rgba(0,0,0,0.8));
  position: absolute;
  left: 0vw;
  top: 0vw;
  z-index: 6;
}

.part-1 {
  clip-path: polygon(0% 0%, 67.3% 2.5%, 77% 100%, 35.1% 88.8%);
  background: #da1f1f;
  width: 35vw;
  height: 16vw;
  position: absolute;
  top: 20vw;
  left: 6vw;
  transform: rotate(15deg);
}

.part-2-wrap {
  filter: drop-shadow(9px 5px 10px rgba(0,0,0,0.8));
  position: absolute;
  left: 0vw;
  top: 0vw;
  z-index: 3;
}

.part-2 {
  clip-path: polygon(0% 0%, 67.3% 2.5%, 77% 100%, 35.1% 88.8%);
  background: #da1f1f;
  width: 35vw;
  height: 16vw;
  position: absolute;
  top: 20vw;
  left: 22vw;
  transform: scaleX(-1) rotate(15deg);
}

<div class="frame">
  <div class="holder">
    <div class="part-1-wrap">
      <div class="part-1"></div>
    </div>
    <div class="part-2-wrap">
      <div class="part-2"></div>
    </div>
    <div class="part-3-wrap">
      <div class="part-3"></div>
    </div>
    <div class="part-4-wrap">
      <div class="part-4"></div>
    </div>
    <div class="part-5-wrap">
      <div class="part-5"></div>
    </div>
  </div>
</div>