<div class="lab-container">
<p class="rainbow-text">Life throws challenges and every challenge comes with rainbows and lights to conquer it.</p>
</div>
:root {
}
.lab-container {
min-height: 100dvh;
display: grid;
place-items: center;
padding: 2rem;
}
.rainbow-text {
max-width: 45rem;
background-image: linear-gradient(
to right,
#ffadad, /* Soft Red */
#ffd6a5, /* Soft Orange */
#fdffb6, /* Soft Yellow */
#caffbf, /* Soft Green */
#9bf6ff, /* Soft Blue */
#bdb2ff, /* Soft Purple */
#ffadad /* Loop back to the first color for a seamless transition */
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
background-size: 200% auto;
text-align: center;
font-size: 1.75rem;
font-weight: 700;
animation: rainbow 4s linear infinite;
}
@keyframes rainbow {
to {
background-position: 200% center;
}
}