👉 The mix-blend-mode property is used to define how the background and foreground of an element blend together
👉 In the screen mode, the black color of the text cancels out the white background and makes the text segment transparent
✨ HTML used in this example
✨ Using tailwindcss, you can control how elements blend with backgrounds using Mix Blend Mode Utilities.
Let's get connected! You can find me on:
- Medium: https://medium.com/@nhannguyendevjs/
- Dev: https://dev.to/nhannguyendevjs/
- Substack: https://nhannguyendevjs.substack.com/
- Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
- X (formerly Twitter): https://twitter.com/nhannguyendevjs/
Top comments (2)
That's a cool trick, but the explanation is way off. What really happens is that that the screen blend mode inverts the colours, multiplies them, then inverts the result again; so when one of the graphics is black-and-white, the white parts become white while the black parts become whatever the other graphic is.
In other words, this only works for white backgrounds (though
multiplyhas the same effect with black backgrounds), but cannot be applied to any custom background colour.Thank you for the explanation. 💖💖💖