Texto Degradado en CSS

CSS 12 febrero, 2019

Los Degradados o Gradients son una de los muchos efecto que podemos aplicar a un texto o elemento con CSS.

En este ejemplo simple vemos como utilizarlo:

HTML
 

CSS
 

Resultado

 

Explicación

Degradado en CSS

background: -webkit-linear-gradient(blue, red);Crea todo el elemento del texto con un fondo degradado que empieza en la parte superior con el color azul y va degradándose hasta el rojo.
-webkit-text-fill-color: transparent;Rellena el texto con un color transparente.
-webkit-background-clip: text;Utiliza el fondo con el texto que tenemos, rellenando únicamente el texto con el fondo degradado del color.

 

Puedes copiar y probar este código de forma rápida desde nuestra herramienta:

Editor Código Online

 

Trending

La Coruña, España Correo contacto@pc-solucion.es