<h1>Jello</h1>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-size: contain;
background: radial-gradient(#93acff, #2500ff);
}
@font-palette-values --color {
font-family: "Honk";
base-palette: 4;
override-colors: 0 #49371f, 1 #140c07, 2 #b9f, 3 #b9f, 4 #b9f, 5 #b9f, 6 #b9f,
7 #b9f;
}
h1 {
font-family: "Honk", system-ui;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "MORF" 39, "SHLN" 39;
font-palette: --color;
font-size: calc(25vw + 0.5rem);
text-transform: uppercase;
position: relative;
width: 100%;
text-align: center;
&:after {
content: "Jello";
position: absolute;
background: linear-gradient(
-45deg,
#b9f 25%,
#37c8e4 25%,
#37c8e4 50%,
#b9f 50%,
#b9f 75%,
#37c8e4 75%,
#37c8e4
);
width: 100%;
left: 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 6px 6px;
mix-blend-mode: color-dodge;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.