This effect is so cool and just around fun to see. A CSS cut-out effect! 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 permalink
HTML for this project could not be easier. It's only a div with a text element inside.
CSS Cut out text effect permalink
Alright let's start by making our background div centered.
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.
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.
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
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!
Browser Support permalink
Mix-blend-mode does not have full support. Internet Explorer for one, will not render it 🤕.