Neste tutorial, você vai descobrir como adicionar uma animação de degradê impressionante que faz o texto brilhar em várias cores usando apenas CSS e Elementor Free. Transforme suas palavras em verdadeiras obras de arte visuais e dê um toque especial ao seu design! 🚀
Código CSS
HTML
<style>
/*Texto com 3 cores:*/
.texto-3-cores {
background: linear-gradient(90deg, #f00 0%, #0f0 20%, #44f 40%, #f00 60%, #0f0 80%, #44f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 250%;
animation: texto-3-cores normal infinite linear 2s;
}
@keyframes texto-3-cores {
0% {background-position: left;}
100% {background-position: right;}
}
/*Texto com 2 cores*/
.texto-2-cores {
background: radial-gradient(circle, rgba(68,68,255,1) 0%, rgba(255,136,136,1) 33%, rgba(68,68,255,1) 66%, rgba(255,136,136,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 300%;
animation: texto-2-cores normal infinite linear 2s;
}
@keyframes texto-2-cores {
0% {background-position: right;}
100% {background-position: left;}
}
/*Texto com efeito de reflexo*/
.texto-reflexo {
background: linear-gradient(235deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%);
-webkit-background-clip: text;
background-size: 400%;
animation: reflexo normal infinite linear 3s;
}
@keyframes reflexo {
0% {background-position: right;}
100% {background-position: left;}
}
</style>
