Está de moda utilizar gradientes en los textos, sobre todo si trabajas con diseñadores Figma, ellos tienden a ponerle gradiente a todo. 🎨

Por eso en esta entrada de referencia (para que la guardes en tus favoritos), te voy a enseñar cómo crear texto con gradiente con el mínimo CSS:

Primero maquetamos nuestro ejemplo

<h2 class="gradient-title">
  Título con gradiente
</h2>

Vamos a darle estilos a este título con CSS con la clase gradient-title ahora:

.gradient-title {
  font-family: sans-serif;
  font-size: 5vw;
}

Ahora agreguemos nuestro gradiente

El gradiente más simple que podemos utilizar para nuestros fines con el texto es linear-gradient, pero puedes explorar cómo generar otros con una herramienta genial que te dejo aquí

Agreguemos, pues, nuestro gradiente:

.gradient-title {
  font-family: sans-serif;
  font-size: 5vw;
  background-image: linear-gradient(90.19deg, #69acee 18.61%, #8634f6 82.19%);
  }

Esto simplemente agrega el gradiente como background. Esto se vería algo así:

Necesitamos entonces agregarle la mágia.

Agregando la magia de WebKit

Para poder convertir nuestro fondo con un gradiente lineal en el color de relleno de nuestro texto, es necesario hacer uso de un par de atributos que solo están disponibles si el navegador puede ejecutar Webkit:

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

Estos dos atributos son la clave, si puedes, memorízalos.

El código final es así:

.gradient-title {
  font-family: sans-serif;
  font-size: 5vw;
  background-image: linear-gradient(90.19deg, #69acee 18.61%, #8634f6 82.19%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Y nuestro título se ve así:

¡Super!

Es hora de usar texto con gradiente en todo tu sitio web 🥳

Aquí te dejo el código para que lo leas con calma 😉 y con un extra de párrafo con gradiente. Disfrútalo.

CodePen

Abrazo. Bliss.