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?
4 Replies
You can use mix-blend-mode on the text https://codepen.io/jochemm/pen/MWNNZWw
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
Thank you soo much!
You are a life saver
š
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