CSS- transparent text that inherits grandparent div's color-CodePudding

I'm making a personal website. I wanted to add something fun and let people write to my 'wall'. The idea is to have a grandparent div that is a linear gradient, a parent div that is black and text that matches the grandparent div (the part of the gradient that would be under the text. I know I can just give the text the same gradient as the background but id ideally like the text to look as if it is a hole in the black div. Here is the page without text:

Here is my CSS so far:

.black {
  overflow: hidden;
  height: 88vh;
  width: 98vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;
  /* border-width: 2vh;
  border-style: solid;
  border-image: var(--gradient) 1; */
 }

 .gradient {
  overflow: hidden;
  height: 92vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: var(--gradient);
 }

 .wallText {
  font-weight: 800;
  font-size: 4vh;
  justify-content: space-between;
  color: transparent;
 }

and the JSX:

 return (
    <div className='grad'>
      <div className="black">
      <p className="wallText">WALL</p>
      </div>
    </div>
  )

Thanks in advance for any help!

CodePudding user response：

check out the post for Knockout text from css-tricks using that below is a snippet similar to yours.

.gradient {
  overflow: hidden;
  height: 92vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, red, red 5%, #fff);
 }
.wall {
  overflow: hidden;
  height: 88vh;
  width: 98vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;
  color: transparent;
  
  color: white;
  mix-blend-mode: multiply;
 }

<div class='gradient'>
    <p >Wall Text</p>
</div>