A Super Simple Way To Create Cut-Out Text Effect Using Pure CSS

Nhan Nguyen - Nov 28 '23 - - Dev Community

👉 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

Image description

Image description

✨ Using tailwindcss, you can control how elements blend with backgrounds using Mix Blend Mode Utilities.


Let's get connected! You can find me on:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .