How to create: hollow text

Learn how to use CSS to create responsive hollow text (also known as clipped text or cutout text).

Hollow text is a transparent text that looks like it is cut out from the background image:

WUHAN

Try it yourself

Note:This example does not apply to Internet Explorer or Edge.

How to create hollow text

Step 1 - Add HTML:

<div class="image-container">
  <div class="text">NATURE</div>
</div>

Step 2 - Add CSS:

You can use the mix-blend-mode property to add hollow text to an image. But IE or Edge do not support it:

.image-container {
  background-image: url("img_nature.jpg"); /* Image used - very important! */
  background-size: cover;
  position: relative; /* Needed to position the clipped text in the middle of the image */
  height: 300px; /* Fixed height */
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* Responsive font size */
  font-weight: bold;
  margin: 0 auto; /* Center the text container */
  padding: 10px;
  width: 50%;
  text-align: center; /* Center the text */
  position: absolute; /* Position the text */
  top: 50%; /* Position the text in the center */
  left: 50%; /* Position the text in the center */
  transform: translate(-50%, -50%); /* Position the text in the center */
  mix-blend-mode: screen; /* This makes it possible to clip text */
}

Try it yourself

If you want black container text, please set mix-blend-mode Change to multiplyChange the background color to black and the color to white:

Instance

.text {
  background-color: black;
  color: white;
  mix-blend-mode: multiply;
  ....
}

Try it yourself