En HTML, un degradado de texto (text-gradient) es un efecto visual que crea una transición suave entre dos o más colores dentro del texto, utilizando CSS para lograr este efecto. No existe una propiedad CSS específica llamada "text-gradient", sino que se logra utilizando la propiedad background-image con un valor de degradado (linear-gradient o radial-gradient) y luego aplicando una máscara de recorte (mask-clip) para mostrar el degradado solo en el texto.
¿Cómo funciona?
1. Crear un degradado: Se define un degradado CSS utilizando la función linear-gradient() o radial-gradient(),especificando los colores y la dirección del degradado.
2. Aplicar el degradado como fondo: El degradado se aplica al elemento de texto como fondo utilizando la propiedad background-image.
3. Enmascarar el texto: La propiedad background-clip: text o mask-clip:text se utiliza para recortar el fondo del degradado, mostrando el degradado solo dentro de la forma del texto.
4. Hacer que el texto sea transparente: Para que el texto sea visible sobre el fondo, se establece la propiedad color del texto en transparent.
Ejemplo de código
El resultado es el siguiente:
Texto con degradado
Beneficios de usar degradados de texto
Atractivo visual: Los degradados de texto pueden hacer que el texto sea más atractivo y llamativo.
Moderno y elegante: Los degradados pueden darle a tu sitio web un aspecto moderno y elegante.
Mejora la legibilidad: Un degradado bien elegido puede mejorar la legibilidad del texto, especialmente en temas oscuros.
Fortalece la marca: Puedes usar degradados que coincidan con tu esquema de colores para fortalecer tu identidad de marca.
En resumen, el texto con degradado en HTML es una técnica CSS que utiliza degradados de fondo y máscaras de recorte para crear efectos de texto visualmente atractivos y llamativos.
Recursos online
En internet dispones de varios recursos online para lograr textos con degrados, ... a tu gusto. Seguidamente, se citan algunos de esos recursos:
https://www.cssgradienttext.com/
