Alright, let's tackle this drop-shadow penetration issue you're facing. I get exactly what you mean—those big, glowing shadows from your SVGs are getting blocked by the sibling .h-100 divs or other images, and you want them to shine through instead. Let's break down why this happens and fix it with actionable solutions.

Why the Shadow Gets Blocked #

Your current setup has three full-height divs stacked on top of each other (since they're all height:100%). Even though your SVGs are absolutely positioned, the parent divs create stacking contexts that sit in front of earlier elements' shadows. Plus, later SVGs (in DOM order) sit on top of earlier ones, blocking their shadows from showing through.

Solution 1: Ditch the Parent Divs (Simplest Fix) #

If those .h-100 divs don't serve any other purpose beyond height control, just remove them entirely. Placing your SVGs directly in the body eliminates the extra stacking contexts that block shadows:

<img src="___.svg"/>
<img src="___.svg"/>
<img src="___.svg"/>

img {
  -webkit-filter: drop-shadow(0px 0px 150px rgba(255, 255, 209, 1));
  filter: drop-shadow(0px 0px 150px rgba(255, 255, 209, 1));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Add this to make shadows truly "penetrate" by blending with lower elements */
  mix-blend-mode: screen;
}

The mix-blend-mode: screen trick makes the bright yellow shadows blend with whatever's beneath them, so even if one SVG is on top of another, their shadows will combine instead of blocking each other.

Solution 2: Keep the Parent Divs (Adjust Stacking Contexts) #

If you need to keep the .h-100 divs for layout or other reasons, adjust their stacking order and add blending to let shadows through:

/* Update your .h-100 class */
.h-100 {
  height: 100% !important;
  position: relative;
  z-index: 0; /* Push divs to a lower stacking layer */
  background: transparent; /* Ensure no hidden background blocks shadows */
}

img {
  -webkit-filter: drop-shadow(0px 0px 150px rgba(255, 255, 209, 1));
  filter: drop-shadow(0px 0px 150px rgba(255, 255, 209, 1));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* Keep SVGs above their parent divs */
  mix-blend-mode: screen; /* Let shadows blend through */
}

By setting z-index:0 on the parent divs, you ensure they don't sit on top of earlier SVGs' shadows. The z-index:1 on SVGs keeps them visible above their parents, and the blend mode makes shadows shine through overlapping elements.

Solution 3: Container-Level Shadow (For Combined Glow) #

If you want all SVGs to share a single unified glow (instead of individual shadows), wrap them in a single container and apply the drop-shadow to the container itself:

<div class="svg-container">
  <img src="___.svg"/>
  <img src="___.svg"/>
  <img src="___.svg"/>
</div>

.svg-container {
  position: relative;
  height: 100%;
  -webkit-filter: drop-shadow(0px 0px 150px rgba(255, 255, 209, 1));
  filter: drop-shadow(0px 0px 150px rgba(255, 255, 209, 1));
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

This creates one big glow around the entire group of SVGs, which automatically avoids any blocking issues since it's applied to the top-level container.

内容的提问来源于stack exchange，提问作者phwt