Texto gradiente animado con CSS

Truco rápido para animar un texto con un gradiente animado usando reglas CSS.

text-gradiente-animado-css

En el HTML añadimos algun elemento con el texto, por ejemplo:

<h1>Texto gradiente animado</h1>

Luego añadimos las siguientes reglas CSS:

body {
background: #333;
}
h1 {
background: linear-gradient(to right, #FFF 20%, rgb(168, 168, 20) 40%, #FF0 60%, #FFF 80%);
font-weight: 600;
color: #000;
background-size: 200% auto;
color: #000;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientText 15s linear infinite;
font-size: 80px;
font-family: sans-serif;
text-align: center;
}
@keyframes gradientText {
to {
background-position: 200% center;
}
}

Hace poco ya vimos cómo añadir gradiente en un texto con CSS. Aquí, la clave para que sea un texto animado es añadir la animación @keyframes gradientText y usarla en la propiedad animation en el h1.

Demo

Aquí puedes ver el texto degradado animado en acción: