# CSS cut out effect that will blow your mind 🤯

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](https://daily-dev-tips.com/posts/building-a-realtime-photoshop-%F0%9F%8E%A8/) it will show through the image.

The result you can see and touch on this Codepen.

%[https://codepen.io/rebelchris/pen/WNxQmpd]

## HTML Structure

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

```html
<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](https://daily-dev-tips.com/posts/css-flexbox-most-easy-center-vertical-and-horizontal/).

```css
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.

```css
.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.

![CSS cut out text pt1](https://cdn.hashnode.com/res/hashnode/image/upload/v1602653718209/Xaq9rZFVI.png)

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.

```css
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](https://daily-dev-tips.com/posts/how-to-work-with-css-viewport-units/) 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!

![Balloon effect](https://cdn.hashnode.com/res/hashnode/image/upload/v1602653906989/1MZWnW1m2.png)

## Browser Support

Mix-blend-mode does not have full support. Internet Explorer for one, will not render it 🤕.

![CSS mix-blend-mode support](https://caniuse.bitsofco.de/static/v1/mdn-css__properties__mix-blend-mode-1602653957867.png)

### 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](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)