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.

More CSS Tips