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:

1	<p class="degradado">Texto con degradado</p>

.degradado {

background: -webkit-linear-gradient(blue, red);

-webkit-text-fill-color: transparent;

-webkit-background-clip: text;

}

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: