<article id='blur'>Blood...</article>
<article class='text' aria-hidden='true' data-text='Blood...'></article>
$r: 5px;

%text {
	--f: 1;
	grid-area: 1/ 1;
	padding: .125em .5em;
	color: hsla(345, calc(var(--f)*100%), 55%, calc(.25 + .75*var(--f)));
	content: attr(data-text)
}

article { font: 900 21vw/ 1.25 pacifico, z003, segoe script, comic sans ms, cursive }

#blur {
	--r: #{$r};
	position: absolute;
	bottom: 100vh;
	filter: blur($r)
}

#blur, .text::before {
	transform: translate(-.125em, -.125em);
	@extend %text
}

.text {
	display: grid;
		
	&::after {
		--f: 0;
		@extend %text;
		z-index: 2;
		backdrop-filter: blur($r);
		-webkit-mask: linear-gradient(red, red) text;

		@supports (background: -moz-element(#blur)) {
			background: -moz-element(#blur) #fff;
			background-clip: text;
			backdrop-filter: none
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.