Subscribe

This Tailwind CSS cut out effect will amaze you

✍️

Creating a super cool image cut out text effect in Tailwind CSS

5 Sep, 2021 Β· 2 min read

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

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

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.

Tailwind CSS cut out effect

Thank you for reading, and let's connect!

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

Creating an animated wave line with Tailwind CSS

10 Mar, 2022 Β· 4 min read

Creating an animated wave line with Tailwind CSS

Tailwind CSS Numeric font variants

9 Mar, 2022 Β· 3 min read

Tailwind CSS Numeric font variants

Join 1900 devs and subscribe to my newsletter