[Malleys]

III, вы можете достигнуть такого эффекта, совмещая вместе такие свойства, как mix-blend-mode, text-shadow, background.

Например, вдавленный текст...

<figure>
	<figcaption>Hi, you all!</figcaption>
	<img src="https://picsum.photos/id/863/640/480">
</figure>

<style>

figure {
	position: relative;
	display: inline-block;
}

figure figcaption {
	position: absolute;
	top: 0; bottom: 0;
	right: 0; left: 0;
	margin: auto;
	width: max-content;
	height: max-content;
	font: 900 500% system-ui;
	/* далее вдавленный текст */
	color: transparent;
	background: rgb(0, 0, 0, 1);
	mix-blend-mode: multiply;
 	-webkit-background-clip: text;
	   -moz-background-clip: text;
	        background-clip: text;
	text-shadow:
		-1px 1px 1px rgba(255, 255, 255, 0.25),
		-5px 5px 5px rgba(255, 255, 255, 0.75)
}
	
</style>

(Этот пример почему-то не работает в Firefox)

ЕЩЁ Более короткий код... (работает в Firefox)

<figure>
	<figcaption>Hi, you all!</figcaption>
	<img src="https://picsum.photos/id/863/640/480">
</figure>

<style>

figure {
	position: relative;
	display: inline-block;
}

figure figcaption {
	position: absolute;
	top: 0; bottom: 0;
	right: 0; left: 0;
	margin: auto;
	width: max-content;
	height: max-content;
	font: 900 500% system-ui;
	mix-blend-mode: multiply;
	color: transparent;
	text-shadow: -5px 5px 10px white, 0 0 0 #222;
}
	
</style>