Vercel Text Gradient

<span class="background animated-gradient-text bg-1">
  <span class="foreground foreground-1">Develop.</span>
</span>
 
<span class="background animated-gradient-text bg-2">
  <span class="foreground foreground-2">Preview.</span>
</span>
 
<span class="background animated-gradient-text bg-3">
  <span class="foreground foreground-3">Ship.</span>
</span>

span {
  font-size: clamp(3rem, 7vw, 5rem);
  text-align: center;
  color: #FFF;
  font-weight: bolder;
  font-feature-settings: "rlig" 1, "salt" 1, "ss03" 1, "ss01" 1, 'ss02' 1, 'ss04' 1, 'ss05' 1, 'ss06' 1, 'ss07' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
 
.background {
  position: relative;
  display: block;
  -webkit-user-select: none;
  user-select: none
}
 
.foreground {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-left: var(--padding);
  padding-right: var(--padding);
  background-image: linear-gradient(90deg, var(--start-color), var(--end-color));
  position: relative;
  z-index: 1
}
 
.background:before {
  content: var(--content);
  position: absolute;
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: -10px;
  background: linear-gradient(180deg, #fff, rgba(122, 122, 122, 0.75));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  font-weight: bolder;
}
 
/* ---------------- Primary ---------------- */
@keyframes animated-fg-1 {
 
  0%,
  16.667%,
  to {
    opacity: 1
  }
 
  33.333%,
  83.333% {
    opacity: 0
  }
}
 
@keyframes animated-bg-1 {
 
  0%,
  16.667%,
  to {
    opacity: 0
  }
 
  25%,
  91.667% {
    opacity: 1
  }
}
 
.bg-1 {
  --content: 'Develop.';
  --padding: 0.05em;
  --color: #FFF;
  --start-color: #007CF0;
  --end-color: #00dfd8;
}
 
.bg-1:before {
  animation: animated-bg-1 8s infinite
}
 
.foreground-1 {
  animation: animated-fg-1 8s infinite
}
 
 
/* ---------------- Secondary ---------------- */
@keyframes animated-bg-2 {
 
  0%,
  to {
    opacity: 1
  }
 
  33.333%,
  50% {
    opacity: 0
  }
 
  25%,
  58.333% {
    opacity: 1
  }
}
 
@keyframes animated-fg-2 {
 
  0%,
  to {
    opacity: 0
  }
 
  33.333%,
  50% {
    opacity: 1
  }
 
  16.667%,
  66.667% {
    opacity: 0
  }
}
 
.bg-2 {
  --content: 'Preview.';
  --padding: 0.05em;
  --start-color: #7928CA;
  --end-color: #FF0080;
}
 
.bg-2:before {
  animation: animated-bg-2 8s infinite
}
 
.foreground-2 {
  animation: animated-fg-2 8s infinite
}
 
/* ---------------- Tertiary ---------------- */
@keyframes animated-fg-3 {
 
  0%,
  50%,
  to {
    opacity: 0
  }
 
  66.667%,
  83.333% {
    opacity: 1
  }
}
 
@keyframes animated-bg-3 {
 
  0%,
  58.333%,
  91.667%,
  to {
    opacity: 1
  }
 
  66.667%,
  83.333% {
    opacity: 0
  }
}
 
.bg-3 {
  --content: 'Ship.';
  --padding: 0.05em;
  --start-color: #FF4D4D;
  --end-color: #F9CB28
}
 
.bg-3:before {
  animation: animated-bg-3 8s infinite
}
 
.foreground-3 {
  animation: animated-fg-3 8s infinite
}