Front.id

Hoy vamos a abordar que hacer cuando necesitamos que nuestro texto tenga un color degradado.

Como suele suceder, tenemos más de una manera de lograrlo, en este caso vamos a desarrollar dos formas, que podemos usar según nuestras necesidades.

En el primer caso, cuando es un degradado de solo dos colores y uno de los colores es igual al color de fondo donde esta ubicado el texto:

Solo necesitamos una imagen que sea un degradado con transparencia y tenga el mismo color que el fondo donde esta ubicado el texto (blanco en este caso), como en este ejemplo (el fondo rojo solo es para que se pueda apreciar el degradado):

Contando con esto, solo faltarían unas pocas lineas de CSS para colocar la imagen sobre el texto, repetirla horizontalmente si hace falta, y darle al texto el otro color que nos antoje. En esta oportunidad utilizamos un :before para colocar la imagen por encima del texto. 

<h2>Lorem ipsum</h2>

h2 {
    position: relative;
    color: black;
}

h2:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url("gradient-white.png") repeat-x;
    position: absolute;
    top: 0;
    left: 0;
}

Con esto podemos jugar de diversas formas.

El otro caso es cuando necesitamos que el degradado sea de múltiples colores .

Primero veamos el código y luego entramos en la explicación.

<h2>Lorem ipsum</h2>

h2 {
    display: inline-block;
    color: #000;
    background: #fff;
    mix-blend-mode: multiply;
    position: relative;
}

h2:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, red, yellow);
    mix-blend-mode: screen; //<-- atento a esta linea//
    position: absolute;
    top: 0;
    left: 0;
}

** Cabe aclarar que este método es compatible con Chrome y Firefox, pero solo compatible con algunas versiones del resto de navegadores.

Como en el caso anterior posicionamos un fondo de color degradado sobre el texto pero aquí ya entra en juego: mix-blend-mode, que es una propiedad que define cómo el contenido de un elemento debe mezclarse con su fondo.

Ya solo queda jugar con ello.