Texto con degradado de color en CSS

Como crear un texto con degradado de color en CSS.

Los desarrolladores web conocen la lucha que todos hemos tenido para mejorar las fuentes en la web. Ya se trate del tiempo de carga, de estrategias extrañas para usar fuentes personalizadas, o simplemente de encontrar la fuente correcta, embellecer el texto en una pagina web nunca ha sido fácil.

Eso me hizo pensar en fuentes y degradados CSS, ya que los degradados también tenían una difícil introducción a la web. Veamos cómo podemos usar fuentes degradadas con sólo CSS!

Para mostrar un degradado para una fuente dada, en lugar de un color sólido, necesitará usar algunas propiedades prefijadas de la vieja escuela -webkit-:

.texto-degradado {
  /* standard gradient background */
  background: linear-gradient(red, blue);

  /* clip informático */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Aquí te dejo como se vería el código anterior:

ejemplo de texto con degradado en CSS

Esta mezcla de CSS específico de -webkit- y fondo de degradado general se descubrió hace diez años, pero sigue siendo la mejor manera de conseguir un fondo de CSS puro, incluso con fuentes personalizadas. Ten en cuenta que a pesar del prefijo -webkit, Firefox sigue renderizando correctamente la fuente de degradado. También ten en cuenta que la eliminación del prefijo rompe el renderizado correcto.

Con todo lo complicado que pueden llegar a ser las fuentes, es increíble que tengamos un hack CSS bastante simple para lograr texto con degradado de color en CSS. Es una pena que evitar el prefijo -webkit rompa la funcionalidad, pero como siempre digo ¡bienvenido al mundo de CSS!

Si te ha servido este artículo no dudes en dejar un comentario para hacérmelo saber, o si tienes cualquier problema o duda de como implementarlo estaré encantado de poder ayudarte.

Y recuerda, permanece atento a mi blog ya que cada semana traigo mas trucos relacionados sobre diseño web, códigos de programación, tutoriales, cursos e ideas para que mejores tus proyectos, hasta el próximo artículo compañeros 🙂

Y si quieres aprender más sobre diseño, mi canal de Youtube

Si te apasiona el mundo del diseño en general como los degradados en texto, tienes que suscribirte a mi canal en Youtube, verás contenidos tan chulos como este jeje 😉




2 comentarios en «Texto con degradado de color en CSS»

Deja un comentario

Háblame ;)
¿Necesitas ayuda?
Hola! estás interesado en mis servicios? hablemos por WhatsApp ;)