Text Mask with Blend Mode in CSS

Today’s example is a practical one where we will see how to achieve a mask effect applied to text over an image using only HTML and CSS.

HTML

As for the HTML structure, we will need a container that we will use to display a background image, which will also contain the text that will act as a mask.

				
					<main>
	<div class="bg">
		<h1 class="content">wild and free</h1>
	</div>
</main>

CSS

As for the style, we are going to differentiate two parts. The first one is the most important since it will help us understand and achieve the mask effect applied to text, which is very simple, and a second part that will help us obtain a result that looks as stylish as in the example image.

Example of the final result

To achieve the mask effect, we will use the CSS mix-blend-mode property, or blend mode, applied to the text. This property specifies how the content of an element, in this case, our H1 header, should blend with its direct main background, meaning the container with the bg class.

				
					h1 {
  background-color: white;
  mix-blend-mode: screen;
}

The following code is optional since we will use it if we want to achieve a result identical to the example. Let’s break it down to understand the function of each line of code and modify it as we like. With this line, we import a font from Google Fonts. For this example, we will use Open Sans Condensed.

				
					@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700');

We add the property overflow: hidden to the main container to prevent the content from causing scroll when it overflows.

				
					main{
	overflow:hidden;
}

We load the background image and do it only once (no-repeat), proportionally to its minimum size so that it covers the entire container (cover). We will instruct the container to take up the full width and height relative to the viewport dimensions and treat it as a flexible element.

				
					.bg {
  background-image: url("https://cdn.pixabay.com/photo/2017/04/27/07/26/rock-climbing-2264698_960_720.jpg");
  background-position: 0% 50%;
  background-repeat: no-repeat;
  background-size: cover;

  width: 100vw;
  height:100vh;

  display: flex;

}

We use the font previously imported from Google Fonts. We set a font size calculated from 5rem in relation to the size of its container.

				
					h1 {
	font-family: "Open Sans Condensed", sans-serif;
	font-size: calc(5rem + 10vw);
	font-weight: 700;
	letter-spacing: -0.5rem;
	line-height: 0.8;
	margin: 1%;
	padding: 5%;
	text-align: right;
	text-transform: uppercase;
}

The box-sizing property ensures that the width and height of the content will not be affected by the padding or the border.

				
					.content {
	box-sizing: border-box;
}

With this media query, we aim for the text mask to occupy half of the window on larger screens, while on smaller screens, our mask will span the entire width of the window. When the width of our window is at least 40em, our content will have a width of 50vw and a padding of 5rem on the sides.

				
					@media (min-width: 40em) {
    .content {
        padding-left: 5rem;
        padding-right: 5rem;
        width: 50vw;
    }
}

Complete styles code.

				
					h1 {
	background-color: white;
	mix-blend-mode: screen;
}

@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700");

main {
	overflow: hidden;
}
.bg {
	background-image: url("https://cdn.pixabay.com/photo/2017/04/27/07/26/rock-climbing-2264698_960_720.jpg");
	background-position: 0% 50%;
	background-repeat: no-repeat;
	background-size: cover;

	width: 100vw;
	height: 100vh;

	display: flex;
}

h1 {
	font-family: "Open Sans Condensed", sans-serif;
	font-size: calc(5rem + 10vw);
	font-weight: 700;
	letter-spacing: -0.5rem;
	line-height: 0.8;
	margin: 1%;
	padding: 5%;
	text-align: right;
	text-transform: uppercase;
}

.content {
	box-sizing: border-box;
}

@media (min-width: 40em) {
    .content {
        padding-left: 5rem;
        padding-right: 5rem;
        width: 50vw;
    }
}

Demo

You can view the demo and the code in my GitHub repository.

Facebook
Twitter
LinkedIn