¿Cómo funciona el texto con degradado en CSS?

CSS no tiene una propiedad de «texto con degradado». El truco habitual consiste en aplicar un degradado como fondo del elemento, recortar ese fondo con la forma de las letras mediante background-clip: text y hacer transparente el relleno del texto para que se vea el degradado.

Descripción de la herramienta

Escribe el texto, elige un color inicial y uno final, ajusta el ángulo y la herramienta mostrará una vista previa en tiempo real y te proporcionará el CSS para copiar. También puedes cambiar la familia tipográfica, el grosor y el tamaño para que la vista previa coincida con lo que usarás en tu página.

La regla generada tiene este aspecto:

.gradient-text {
  background-image: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
CSS

El resultado final también incluye los ajustes de fuente y las reglas de ajuste de línea.

Características

  • Degradado lineal de dos colores, con un ángulo de 0 a 360 grados
  • Controles para la familia tipográfica, el grosor y el tamaño
  • Vista previa en tiempo real que puedes exportar como imagen, además de CSS listo para pegar