Hue Wave Text
A swell rolls through the line and each letter takes its own hue as it crests, then settles back to plain text. The hue is your accent turned by the letter index with oklch relative color.
Also known as: wave text animation, colorful wave text css, rainbow wave letters.
HTML
<div class="txt-hue-wave-text" aria-label="Color in motion"><span aria-hidden="true"><span style="--i: 0">C</span><span style="--i: 1">o</span><span style="--i: 2">l</span><span style="--i: 3">o</span><span style="--i: 4">r</span><span style="--i: 5"> </span><span style="--i: 6">i</span><span style="--i: 7">n</span><span style="--i: 8"> </span><span style="--i: 9">m</span><span style="--i: 10">o</span><span style="--i: 11">t</span><span style="--i: 12">i</span><span style="--i: 13">o</span><span style="--i: 14">n</span></span></div>
CSS
.txt-hue-wave-text {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.6);
font-family: system-ui, sans-serif;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
letter-spacing: -0.01em;}
.txt-hue-wave-text span span {
display: inline-block;
animation: txt-hue-wave-text-crest 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite backwards;
animation-delay: calc(var(--i) * 0.08s);
}
@keyframes txt-hue-wave-text-crest {
0%, 44%, 100% { translate: 0 0; scale: 1; color: currentColor; }
20% {
translate: 0 -0.3em;
scale: 1.06;
color: oklch(from var(--c) 0.68 0.19 calc(h + var(--i) * 11));
}
}
@media (prefers-reduced-motion: reduce) {
.txt-hue-wave-text span span { animation: none; color: oklch(from var(--c) 0.62 0.19 calc(h + var(--i) * 11)); }
}
@media (prefers-reduced-motion: reduce) {
.txt-hue-wave-text, .txt-hue-wave-text *, .txt-hue-wave-text::before, .txt-hue-wave-text::after, .txt-hue-wave-text *::before, .txt-hue-wave-text *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.