CSS Background color en Textos

Los degradados de color en un sitio web son detalles muy llamativos que dan peso a cierta sección, pero no solo podemos utilizarlos como fondo de un contenedor o banner, también podemos agregar un degradado de color a títulos.

Primero tenemos que definir el texto al que aplicaremos el degradado:

<h1 class="gradient">Mi super titulo</h1>

Una ves tenemos listo nuestro titulo, solo tenemos que aplicar estilos generales:

h1{
    font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
    font-size: 70px;
    font-weight: bold;
    text-transform: uppercase;
}

Para agregar el degradado necesitamos una propiedad de css llamada 'linear-gradient', que se utiliza de la siguiente manera:

background-image: linear-gradient(direction, color-1, color-stop2, ...);

• direction: es la dirección en la que el degradado trabajara.
• color-1: en color principal o de inicio del degradado.
• color-2: en color secundario o de cierre del degradado.

El código con linear-gradient aplicado se vería así:

.gradient {
  background: linear-gradient(to right, #30CFD0 30%, #520AAB 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Resultado: