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 it will show through the image. blend-mode 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. GALAXY < = > div class "background" < > h1 </ > h1 </ > div That's it! CSS Cut out text effect Alright, let's start by making our background div . centered { : flex; : center; : center; : ;
} body display justify-content align-items 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. { : ( )
    center; : cover;
} .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" background-size 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. { : ; : bold; : Roboto, , Arial, sans-serif; : ; : ; : lighten;
} h1 font-size 15vw font-weight font-family "Helvetica Neue" color #000 background #fff mix-blend-mode First, we set a big font-size. I'm using the to make it responsive. viewport size 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 Mix-blend-mode does not have full support. Internet Explorer for one, will not render it 🤕. 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 or Facebook Twitter Previously published at https://daily-dev-tips.com/posts/css-cut-out-effect-that-will-blow-your-mind-%F0%9F%A4%AF/

CodePen

Facebook

Twitter

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Creating Mouse Tracking Eyes using Javascript 👀

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Creating Mouse Tracking Eyes using Javascript 👀

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps