Truco rápido para animar un texto con un gradiente animado usando reglas 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
.
Aquí puedes ver el texto degradado animado en acción:
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Texto gradiente animado con CSS</title> <style> 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; } } </style></head>
<body> <h1>Texto gradiente animado</h1></body>
</html>