This Tailwind CSS cut out effect will amaze you

We created this super cool cut out text effect in CSS, however in today’s article, we’ll have a look at how to do this in Tailwind CSS.

The result will be this super amazing yet straightforward to achieve effect.

See the Pen by Chris Bongers (@rebelchris) on CodePen.

HTML Structure for Tailwind cut out text permalink

As for the HTML structure, we only need two elements.

1. The background container div, will hold the background image
2. A text element this will be positioned on top of the background for the cut-out effect

<div>
  <h1>BOTANY</h1>
</div>

That is all that we need, and with the help of Tailwind CSS, we can easily create this amazing cut-out effect.

Note: Check out this article for integrating Tailwind in your project

Tailwind CSS cut out text effect permalink

To generate this effect, let’s first focus on giving out div a background image. This will be the only custom part of the setup. However, you can use the tailwind config when using Tailwind in your project.

.background {
  background-image: url('https://images.pexels.com/photos/797797/pexels-photo-797797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
}

Then we can add some classes to center this background and make it cover the whole area.

<div class="bg-center bg-cover background"></div>

The second part of this tutorial is to style the h1 element. Let’s start by making it a bit bigger and bold.

<h1 class="font-bold text-9xl">BOTANY</h1>

And the magic comes with the following three classes, we want our text to be the opposite of our background and then use the blend mode to get the effect we need.

<h1 class="font-bold text-black bg-white text-9xl mix-blend-lighten">BOTANY</h1>

And that’s it; we now have a stunning CSS cutout text effect using Tailwind CSS.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter