<div class="backdrop">
	<p class="text multiply">Taitō</p>
</div>
<div class="backdrop">
	<p class="text screen">Taitō</p>
</div>
<div class="backdrop">
	<p class="text darken">Taitō</p>
</div>
<div class="backdrop">
	<p class="text lighten">Taitō</p>
</div>
.backdrop {
	background: url("https://rpsthecoder.github.io/img-repo/Taitō%20by%20Jezael%20Melgoza.jpg") center;
	background-size: contain;
	margin: auto;
	margin-top: 40px;
	width: 75vw;
}

.text {
	font: bolder 12vw "Alfa Slab One";
	text-align: center;
	margin: 0;
	border: 4px solid;
}

.multiply {
	color: white;
	mix-blend-mode: multiply;
	background-color: rgba(59, 2, 6, 1);
}

.screen {
	color: black;
	mix-blend-mode: screen;
	background-color: rgba(244, 220, 211, 1);
}

.darken {
	color: white;
	mix-blend-mode: darken;
	background-color: rgba(59, 2, 6, 1);
}

.lighten {
	color: black;
	mix-blend-mode: lighten;
	background-color: rgba(244, 220, 211, 1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.