Sugerencia rápida sobre CSS Texto con gradiente animado

Creemos ese efecto de texto con gradiente animado con propiedades personalizadas con alcance y background-clip

Jhey Tompkins

Ve a CodePen y crea un nuevo pen.

Crea el lenguaje de marcado para tu texto. Usemos un encabezado con la palabra "Speedy":

<h1 class="boujee-text">Hello!</h1>

Luego, asignemos un background-color más oscuro a nuestro body:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(0 0% 20%);
}

Aumenta el font-size en nuestro texto. Usa clamp para que sea responsivo:

.boujee-text {
  font-size: clamp(3rem, 25vmin, 8rem);
}

Crea dos propiedades personalizadas para los colores que usaremos. Aplica un linear-gradient al background con esos colores y rótalo 90 grados:

.boujee-text {
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / 100% 100%;
}

Crea una propiedad personalizada que puedas usar para el tamaño del fondo horizontal. Úsala para background-size-x:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
}

Para recortar el fondo del texto, establece color en transparent y configura background-clip: text:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

Nota: La propiedad background-clip necesita un prefijo en algunos navegadores como -webkit-background-clip.

En este punto, podrías dejarlo así y experimentar con el background-position y el gradiente que se usa en el background-image. O bien, puedes animar ese gradiente en todo el texto. Primero, define un fotograma clave para la animación. Se usará la propiedad personalizada --bg-size que definiste antes. Un buen ejemplo de propiedades personalizadas con alcance que te facilitan el mantenimiento.

@keyframes move-bg {
  to {
    background-position: var(--bg-size) 0;
  }
}

Luego, aplica la animación con animation:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 8s infinite linear;
}

Para ir más allá, puedes unir tu código de animación en una consulta de medios para respetar las preferencias de movimiento del usuario:

@media (prefers-reduced-motion: no-preference) {
  .boujee-text {
    animation: move-bg 8s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

¡Listo! 🎉 Creaste texto con un gradiente animado con CSS usando propiedades personalizadas con alcance y background-clip.

Aquí tienes esta sugerencia en un video rápido. ⚡️

¿Prefieres esta información en formato de tweet? 🐦

¡Sigue siendo genial!