0

Ok, I'm trying to do something like that.

Let's say I have a BODY with a background image. On this body, I have a position:fixed full screen DIV#a with a gradient background and mix-blend-mode: exclusion.

Now, I want to add another DIV#b with a black background and some text. But I want my text to be "transparent" so we can see the colors of the DIV#b through the text.

Is that possible using only CSS (I don't want to use svg or anything else, only text and css). Does the text has to be directly in DIV#b or can I put it in another div inside the DIV#b ?

The CSS gradient I have is animated using css, so I need the text to react with it, I can't cheat.

The html result would be

<body>
    <div id="a"></div> <!-- position:fixed, animated gradient and mix-blend-mode: exclusion -->
    <div id="b"> <!-- dark background div -->
        <span>some text</span> <!-- "transparent text" that is colored with #a -->
    </div>
</body>
hellodracon
  • 165
  • 1
  • 12

0 Answers0