Morphing Text Effect
Words melt into each other: both blur while they cross-fade, and an SVG alpha threshold turns the blur into gooey, liquid edges. Pure CSS plus one inline filter; keep the words short and bold.
Also known as: gooey text morph, text morph animation css, liquid word transition.
Imagine
Design
Build
Launch
HTML
<div class="txt-morphing-text-effect">
<svg class="txt-morphing-text-effect-defs" aria-hidden="true" focusable="false"><filter id="txt-morphing-text-effect-goo"><feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 12 -5" /></filter></svg>
<span class="txt-morphing-text-effect-words">
<span style="--i: 0">Imagine</span>
<span style="--i: 1">Design</span>
<span style="--i: 2">Build</span>
<span style="--i: 3">Launch</span>
</span>
</div>CSS
.txt-morphing-text-effect {
--c: var(--txt-color, #3b82f6);
font-size: var(--txt-size, 32px);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
display: inline-block;
white-space: nowrap;}
.txt-morphing-text-effect-defs {
position: absolute;
width: 0;
height: 0;
}
.txt-morphing-text-effect-words {
display: grid;
justify-items: center;
font-size: 1.3em;
color: var(--c);
filter: url(#txt-morphing-text-effect-goo);
}
.txt-morphing-text-effect-words span {
grid-area: 1 / 1;
/* 4 words x 2s = 8s */
animation: txt-morphing-text-effect-melt 8s linear infinite;
animation-delay: calc(var(--i) * 2s - 8s);
}
.txt-morphing-text-effect-words span:not(:first-child) {
opacity: 0;
}
/* blur grows as 1/(1 - t) and opacity falls as (1 - t)^0.4: the words stay
legible until the middle of the morph, then melt fast */
@keyframes txt-morphing-text-effect-melt {
0%, 12.5% { opacity: 1; filter: blur(0); }
15.63% { opacity: 0.89; filter: blur(0.025em); }
18.75% { opacity: 0.76; filter: blur(0.075em); }
21.88% { opacity: 0.57; filter: blur(0.22em); }
25%, 87.5% { opacity: 0; filter: blur(0.5em); }
90.63% { opacity: 0.57; filter: blur(0.22em); }
93.75% { opacity: 0.76; filter: blur(0.075em); }
96.88% { opacity: 0.89; filter: blur(0.025em); }
100% { opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
.txt-morphing-text-effect, .txt-morphing-text-effect *, .txt-morphing-text-effect::before, .txt-morphing-text-effect::after, .txt-morphing-text-effect *::before, .txt-morphing-text-effect *::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.