<p class="gradient animate">
The quick brown fox jumps over the lazy dog
</p>
@keyframes animateGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
body {
width: 100vw; height: 100vh;
display: grid;
place-items: center;
font-family: sans-serif;
background-color: #222;
--gradient: linear-gradient(
45deg,
#95f7d0,
#63b9be,
#887dc5,
#d478ff,
#ff94e7,
#fec6c0,
#fdff94,
#b6f9bd
);
font-size: 3rem;
font-weight: bold;
}
.gradient {
color: transparent;
-webkit-background-clip: text;
background-clip: text;
background-image: var(--gradient);
}
.animate {
background-size: 400% 400%;
animation: animateGradient 5s ease infinite;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.