backdrop-filter: grayscale(100%) doesn't affect the background's shadow properties-CodePudding

I'm trying to create a "screen" that applies grayscale to the background. The background is a div with text content that has text-shadow applied to make it look like a neon sign. The grayscale changes the text to gray, but not the text-shadow. Is there away gray the shadows?

html

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link ref="stylesheet" href="./src/styles.css" />
  </head>

  <body>
    <a>
      <div >
        <div >HOME</div>
        <div ></div>
        <div >HOME</div>
      </div>
    </a>
  </body>
</html>

css

body {
  font-family: sans-serif;
}

a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.8rem;
  font-weight: bold;
  height: 4rem;
  text-decoration: none;
  width: 90%;
  border-radius: 6px;
  box-shadow: 2px 2px 5px gray;
}

.box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.backgroundText {
  position: absolute;
  color: red;
  text-shadow: 0 0 10px red, 0 0 20px red, 0 0 40px red, 0 0 80px red;
}

.screen {
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: grayscale(100%);
  left: 230px;
}

.foregroundText {
  position: absolute;
  --webkit-text-fill-color: transparent;
  --webkit-background-clip: text;
}

The idea is that the screen will be animated to translate right and that will allow the neon color to come out. The reason why I'm messing around with grayscale is because everything is transparent or on a back-drop blur effect. I thought grayscale would maintain some level of transparency while removing the colors until it's ready to be revealed.

CodePudding user response：

I guess you better use z-index in your css . Add this to your codes :

.backgroundText{z-index:0;}
.screen{z-index:1;}
.foregroundText{z-index:2;}

CodePudding user response：

Okay, the code above works as originally expected. I tried to recreate a snippet of my project code to be able to run in codesandbox.io. The difference with it and my project code is that my base background is transparent and it seems that there has to be a solid background for grayscale to gray out the shadows. So, this issue is resolved.