<a href="https://godofredo.ninja/css-como-realizar-un-animado-efecto-de-texto-degradado-gradient/">CSS </br> Texto con </br> Degradado</a>
body {
background-color: #031b27;
height: 100vh;
display:flex;
align-items:center;
justify-content: center;
font-size: 4rem;
font-weight: bold;
text-align: right;
}
/* Css - Texto con Degradado */
a {
animation: fluido 10s ease-in-out infinite;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 300%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes fluido {
0% { background-position: 0 50% }
50% { background-position: 100% 50% }
100% { background-position: 0 50% }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.