How to make bottom overlay box shadow white when over black and black when over white in CSS?

Question

I am trying to make it so the box shadow is visible as a glow when the background is dark, and as a blackish shadow when the background is light, by using mix-blend-mode: multiply in CSS, but it doesn't seem to do what I'd like.

Notice there is no noticeable "white glow" on the button that says "Manifold" on it (bottom left).

I did this basically:

.dark {
  color: white;
  background: black;
  width: 100%;
  height: 200px;
  padding: 16px;
}

.shadow {
  position: absolute;
  height: 100px;
  top: 50px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  mix-blend-mode: difference;
}

.two {
 top: 250px;
}

<div class="dark">hello</div>
<div class="dark shadow">world</div>
<div class="dark shadow two">see the shadow</div>

How can I get that "Manifold" button to be a drop shadow which is dark against a light background (arbitrary light background, not just white), and light glow against a dark background (arbitrary dark background, not just black)? Is there a blend mode to use somewhere or some trick?

I thought blend modes would make more intuitive sense, but hence they don't, so need to learn more about that too, perhaps trying all of them. Edit, I tried most of them, but they aren't seemingly doing what I'd expect, so the problem is still unsolved.