You can apply different CSS Blend Modes options in TailwindCSS to get almost any effect you want. In TailwindCSS, there are different classes for each blend mode. In this example, you’ll see how to have transparent text over an image.
Transparent Text on an Image in TailwindCSS
You can apply the mix-blend-screen class in TailwindCSS to get the transparent text over an image. For this blend mode to work, you must provide a background color to the text element. Here is an example.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="relative flex h-screen"> <img src="https://images.unsplash.com/photo-1611672585731-fa10603fb9e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" alt="image" class="h-full w-full object-cover object-center" /> <div class="absolute top-1/2 left-10 max-w-full md:left-20"> <div class="text-5xl text-white md:text-7xl">Transparent </div> <div class="bg-white text-5xl font-bold text-black mix-blend-screen px-2 ">Text Example</div> </div> </div> |
You can check the working example and also the output of the above code in the following screenshot.
Conclusion
You can get transparent text over an image with the mix-blend-screen class in TailwindCSS. You must provide a background color to the text that you want to see transparently on the image. Read more about the mix-blend classes on Tailwind official docs.