How to create a Cutout Text Effect using CSS

Make money for being or staying online/internet.

You will get a $50 starting gift when you join using this code: Exode4LKrbujm1z and link:: GET THE OFFER NOW!!

With CSS you can create a lot of cool stuff on your websites and today before you leave the site, you will leave with this new easy trick.

In this simple post I will share with you the source code used in the tutorial below.

What is a cutout effect?

This is a see-through text that appears cut out on top of a background image.

Tutorial

HTML

This is the markup I used for this tutorial, but you can target as many elements as possible. The choice is yours.

copy


 <h1 class="city">my city</h1>

CSS

The mix-blend-mode property makes it possible to add the cutout text to the image.

NOTE::The mentioned property above is not supported in Internet Explorer or Edge

copy


body{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image:url('city3.jpg'); /*Replace this with your image path*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.city{
  background-color:rgba(0,0,0,.9);
  border-radius:0 50px 0 50px;
  color:#fff;
  font-size:140px;
  font-family: Arial, Helvetica, sans-serif;
  padding:10px;
  text-transform: uppercase;
  mix-blend-mode: multiply; /*Makes the magic/effect happen*/
}

For free stock images visit: http://pexels.com/