How to do this text inversion?

I came across this UI on Awaards site. The text color seems to react to it's background. How can I replicate something like that in Tailwind?
No description
4 Replies
Jochem
Jochemā€¢3w ago
Jochem
Jochemā€¢3w ago
there's only a couple of parameters that cause the effect: the background on the wrapper causes the "test" to appear and the white color on the text gives mix-blend-mode something to work with. The rest is just to get the layout keep in mind that the effect looking good and staying readable is very dependent on the base image. It works best with high contrast, visually busy black and white images
Shayokh
ShayokhOPā€¢3w ago
Thank you soo much! You are a life saver šŸ’–
Jochem
Jochemā€¢3w ago
glad to help! there's more ways to do this, but this is probably the easiest if the left text can just be the inverse of the left background
Want results from more Discord servers?
Add your server