Cross-Browser Text Masks with Blend Modes

README.md

For effective clipping effects, a font that has bold lettering and thick strokes tends to work best.

Source

_styles.scss

.dark {
	background-image: url(image.jpg);
	background-size: cover;
	text-align: center;

	h1 {
		margin: 0;
		background-color: rgb(0,0,0);
		color: rgb(255,255,255);
		font-family: Montserrat, sans-serif;
		font-size: 20vw;
		line-height: 1.9;
		text-transform: uppercase;
		mix-blend-mode: darken;
	}
}
.reversal {
	position: relative;
	background: rgb(0,0,0);
	
	h1 {
		mix-blend-mode: none;
	}
	img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		mix-blend-mode: darken;
	}
}

index.html

<!-- Text takes precedence over image -->
<div class="dark">
	<h1>Text</h1>
</div

<!-- Image takes precedence over text -->
<div class="dark reversal">
	<h1>Text</h1>
	<img src="image.jpg" alt="" />
</div>

styles.css

.dark {

	background-image: url(image.jpg);
	background-size: cover;
	text-align: center;
}
	.dark h1 {
		margin: 0;
		background-color: rgb(0,0,0);
		color: rgb(255,255,255);
		font-family: Montserrat, sans-serif;
		font-size: 20vw;
		line-height: 1.9;
		text-transform: uppercase;
	}
.reversal {
	position: relative;
	background: rgb(0,0,0);
}	
	.reversal h1 {
		mix-blend-mode: none;
	}
	.reversal img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		mix-blend-mode: darken;
	}