<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.