z-index not working as expected, box-shadow of parent component should be slightly above the span

Question

I'm trying to follow this YouTube video (URL is timestamped).

The problem I'm facing, is that the moment I add the z-index property onto the span element, it disappears from within the circle parent container.

What am I doing wrong here?

Here's what I have:

export default function Spinner() {
  return (
    <Container>
      <Loader>
        <Span />
        <Span />
        <Span />
        <Span />
        <Span />
      </Loader>
    </Container>
  );
}

const Loader = styled.div`
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 4px solid #f1f1f1;
  border-radius: 50%;
  box-shadow: -10px -10px 15px rgba(255, 255, 255, 1),
    10px 10px 10px rgba(0, 0, 0, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 1),
    inset 10px 10px 10px rgba(0, 0, 0, 0.1);
`;

const Span = styled.span`
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
  z-index: -1; // <-- this is the part that makes the span elements disappear
  filter: blur(20px);
`;

I've reproduced it here:

Edit: I've tried increasing the z-index on the parent to 10 and making z-index: 9 on the span elements, but it makes it look like this:

Here's how it should look like: