Para poner un degradado en el texto con CSS, pinta el degradado como fondo del elemento, recorta ese fondo a la forma de las letras y haz transparentes las letras para que el fondo se vea a través. Son tres declaraciones:
.title {
background-image: linear-gradient(90deg, #6d28d9, #db2777);
background-clip: text;
color: transparent;
}Esa es toda la técnica. El resto de esta página trata de lo que sale mal, porque un texto transparente es algo arriesgado de publicar.
¿Por qué no puedo poner un degradado como color del texto?
La propiedad color acepta un solo color, y un degradado no es un color: es una imagen. Las imágenes solo las aceptan las propiedades que esperan una, como background-image, border-image y list-style-image. Por eso color: linear-gradient(...) es simplemente inválido y el navegador descarta la línea.
El generador de degradados CSS escribe justamente ese tipo de línea, y solo esa. Su salida es background-image: linear-gradient(...); (o el equivalente radial o cónico), una sola capa, en sRGB. No escribe las líneas del recorte ni un respaldo, así que para texto copias su línea y añades tú las otras dos.
¿Qué hace cada una de las tres declaraciones?
background-image pinta el degradado sobre la caja del elemento. background-clip: text restringe esa pintura a la zona que cubren los glifos, de modo que el degradado solo se ve dentro de las letras. color: transparent quita el relleno sólido de las letras, que de otro modo quedaría encima y lo taparía. MDN señala que el recorte tiene poco efecto visible si el texto es total o parcialmente opaco, y por eso la tercera línea no es opcional.
Las versiones antiguas de Safari y Chrome solo entendían la forma con prefijo, -webkit-background-clip: text, y muchas hojas de estilo todavía llevan las dos líneas. Conservar la línea con prefijo no cuesta nada; si todavía la necesitas depende del navegador más antiguo que soportes, y la tabla de compatibilidad de MDN es el lugar donde comprobarlo.
Hay un detalle que atrapa a casi todos la primera vez. Un encabezado es un elemento de bloque, así que su fondo ocupa todo el ancho del contenedor y no el ancho de las palabras. Un título corto en una columna ancha muestra solo la primera porción de tu degradado. Haz que el elemento se ajuste a su texto con display: inline-block o width: fit-content, y el degradado irá de la primera letra a la última.
¿Qué pasa si el recorte falla?
El texto desaparece. color: transparent funciona por sí solo se aplique o no el recorte, así que un navegador que ignora background-clip: text igual respeta el relleno transparente y muestra una caja de degradado sin letras recortadas, o nada si el fondo no carga. La recomendación de MDN es dar un respaldo y usar una consulta de características para que el color transparente solo se aplique donde el recorte funciona:
.title {
color: #6d28d9;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
.title {
background-image: linear-gradient(90deg, #6d28d9, #db2777);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}
@media print {
.title {
background: none;
color: #000;
}
}El color sólido es el predeterminado, y el degradado es una mejora para los navegadores que pueden mostrarlo. La regla de impresión existe porque los navegadores suelen omitir los gráficos de fondo al imprimir, a menos que la persona marque una casilla, y un fondo recortado sigue siendo un fondo. Abre la vista previa de impresión de tu propia página antes de decidir que no la necesitas.
¿Hay que revisar el contraste en los dos extremos?
Sí, y también en el medio, y de nuevo sobre cada fondo de página en que pueda aparecer el encabezado. El contraste se mide entre el texto y lo que tiene detrás, y con texto en degradado el color del texto cambia a lo largo de la línea. La cifra que cuenta es la peor de todas, con la misma lógica que los umbrales de WCAG aplicada a cada punto y no a uno solo.
El degradado de ejemplo muestra cómo sale mal. Sobre una página blanca, el extremo violeta (#6d28d9) tiene una razón de contraste de cerca de 7,1:1 y el rosa (#db2777) de cerca de 4,6:1, así que los dos superan el umbral de 4,5:1 para texto normal. Pon el mismo encabezado sobre una página oscura (#111827) y las cifras pasan a cerca de 2,5:1 para el violeta y 3,9:1 para el rosa. El extremo violeta ya no cumple ni el 3:1 que pide el texto grande. Nada cambió en el degradado; cambió el fondo, que es la misma trampa que describe elegir colores para el modo oscuro.
Revisa cada parada en el comprobador de contraste contra el fondo de la página. Para el medio, recuerda que los navegadores mezclan por defecto los degradados sRGB canal por canal, así que el punto medio de dos paradas es el promedio de sus valores de canal. En el ejemplo eso es #a428a8, que da cerca de 6,1:1 sobre blanco y 2,9:1 sobre la página oscura. Si dos paradas están muy separadas en luminosidad, el medio puede ser el punto más débil, como muestra el problema del medio gris.
¿Qué no puede hacer este método, ni estas herramientas?
Hay tres límites que conviene conocer antes de construir sobre esto.
- El comprobador de contraste recibe dos colores hexadecimales opacos. No puede muestrear un degradado, así que revisas las paradas y el punto medio calculado uno por uno, y un degradado con muchas paradas o con forma radial exige más revisiones.
- El generador escribe una sola capa sRGB y ninguna línea de recorte ni de respaldo, como se describió arriba. Si quieres otro espacio de interpolación, lo añades a mano a la línea copiada.
- El texto con degradado es decoración. Un párrafo largo compuesto así se lee peor que las mismas palabras en un color sólido, porque el color cambia constantemente bajo tu mirada. Sirve para un titular de pocas palabras en tamaño grande.
No he probado todas las combinaciones de navegador, modo de contraste del sistema operativo y tecnología de asistencia. Trata el respaldo de arriba como un mínimo, y prueba la página con los ajustes que probablemente usen tus lectores.
Para obtener la línea del degradado, constrúyela en el generador de degradados CSS, cópiala y añade el recorte y el respaldo de esta página. Después pasa cada parada por el comprobador de contraste antes de publicar el encabezado.
Si tu degradado se ensucia a mitad de camino, por qué un degradado CSS se pone gris en el medio explica la aritmética y las dos formas de evitarlo.
Preguntas frecuentes
¿Cómo hago texto con degradado en CSS?
Dale al elemento un degradado como background-image, añade background-clip: text para que el fondo se recorte a la forma de las letras y pon color: transparent para que las letras no lo tapen. Añade la línea de recorte con prefijo -webkit- si soportas navegadores antiguos. Envuélvelo en una regla @supports con un color sólido como valor predeterminado, para que el texto nunca quede invisible.
¿Por qué mi texto con degradado es invisible?
El color del texto es transparente, así que las letras solo se ven si el fondo recortado se pinta detrás de ellas. Si el navegador ignora background-clip: text, o el fondo no carga, nada rellena las letras. Define primero un color sólido y aplica el color transparente solo dentro de una regla @supports para background-clip: text.
¿Por qué mi degradado en un encabezado muestra solo parte de sus colores?
Un encabezado es un elemento de bloque, así que su fondo se estira por todo el contenedor y no solo por las palabras. Un título corto en una columna ancha cubre solo la primera parte del degradado. Usa display: inline-block o width: fit-content para que el elemento mida solo lo que mide su texto.
¿El texto con degradado pasa las pruebas de contraste de accesibilidad?
Puede pasarlas, pero el color del texto cambia a lo largo de la línea, así que cuenta el contraste más bajo de todos. Revisa cada parada de color contra el fondo de la página, y también el punto medio, que es el promedio de las paradas cuando el navegador mezcla en sRGB. Vuelve a revisar si el mismo encabezado aparece en un tema oscuro, porque el fondo cambia el resultado.
¿Puedo usar un degradado CSS directamente como color de texto?
No. La propiedad color acepta un solo color, y un degradado es una imagen, así que color: linear-gradient(...) es inválido y se ignora. Los degradados los aceptan propiedades de imagen como background-image, y por eso el texto con degradado se hace recortando un fondo a las letras.
Última actualización 23 de octubre de 2026
