803 reads

This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯

by Daily Dev TipsNovember 16th, 2020

Too Long; Didn't Read

This CSS Cut Out Effect is Guaranteed to Blow Your Mind. The effect is so cool and just fun to see. What it comes down to is having a background image show through the text. The HTML for this project could not be easier. It's only a div with a text element inside. It's a versatile way of doing this if you are only styling one element. You can also change the color to get a cool alpha effect! The last step is enabling the mix-blend-mode.

Companies Mentioned

featured image - This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯

This effect is so cool and just fun to see. What it comes down to is having a background image show through the text.

How it works is that we will have a div that will have the image as a background. On that, we put our text element, using blend-mode it will show through the image.

The result you can see and touch on this Codepen.

HTML Structure

The HTML for this project could not be easier. It's only a div with a text element inside.

<div class="background">
  <h1>GALAXY</h1>
</div>

That's it!

CSS Cut out text effect

Alright, let's start by making our background div centered.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

We are using flexbox to center anything inside the body. It's a versatile way of doing this if you are only styling one element.

Now we need to make our background div.

.background {
  background: url("https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1957&q=80")
    center;
  background-size: cover;
}

Ok, so the background receives an image, and we set the size to cover. So now we should see something like this.

It's a start but it's kind of the opposite to the effect we want. So let's go ahead and style the text element.

h1 {
  font-size: 15vw;
  font-weight: bold;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #000;
  background: #fff;
    mix-blend-mode: lighten;
}

First, we set a big font-size. I'm using the viewport size to make it responsive.

Then we set the color to be black and the background white. This gives it a full contrast. You can also change the color to get a cool alpha effect!

The last step is enabling the mix-blend-mode. Since we are using a full contrast (black/white), it will totally remove the black text and show whatever is behind there!