<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.