Skip to main content
CSS Tip

Wavy text animation

Create a Wavy text animation using a few lines of code

A text with a wavy background coloration

h1 {
--c: #269af2; /* the color */

--_p: 93% 83.5% at;
--_g1: radial-gradient(var(--_p) bottom,var(--c) 79.5%,#0000 80%) no-repeat;
--_g2: radial-gradient(var(--_p) top ,#0000 79.5%,var(--c) 80%) no-repeat;
background: var(--_g1),var(--_g2),var(--_g1),var(--_g2);
-webkit-background-clip: text;
background-clip: text;
color: #0000;
-webkit-text-stroke: 0.2rem var(--c);
animation:
s 2s infinite alternate,
m 3s infinite linear;
}
@keyframes m {
0% {background-position:-200% 100%,-100% 100%, 0% 100%,100% 100%}
100%{background-position: 0% 100%, 100% 100%,200% 100%,300% 100%}
}
@keyframes s{
0% {background-size: 50.5% 80%}
33% {background-size: 50.5% 70%}
66% {background-size: 50.5% 85%}
100%{background-size: 50.5% 95%}
}

See the Pen CSS only Wavy text by Temani Afif (@t_afif) on CodePen.