Texto con degradado de color en CSS

Texto con degradado 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 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.