<div><h1 data-heading="ooze">Ooze<h1></div>
body {
background: white
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/rose_slime_text_step_05.jpg);
background-size: cover;
mix-blend-mode: screen;
height: 100vh;
}
div {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
h1 {
font-family: "Chee Bleed";
font-variation-settings: "temp" 1000;
animation: variation 5s linear infinite alternate;
font-size: 20vw;
position: relative;
margin: 0;
opacity: 0.8;
color: transparent;
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 25px rgba(#3f6c12, 1);
&::before,
&::after {
content: attr(data-heading);
width: 100%;
position: absolute;
left: 0;
top: 0;
}
&::before {
z-index: -1;
color: #7ebf28;
}
&::after {
z-index: 1;
text-shadow: 2px 2px 5px rgba(#2a4308, 0.4);
}
}
@keyframes variation {
0% {
font-variation-settings: "temp" 0;
}
100% {
font-variation-settings: "temp" 1000;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.