Generador de degradado de texto CSS

Cómo usar

1. Elige tus colores: selecciona dos o más colores para el degradado mediante los selectores.
2. Ajusta el ángulo y el estilo: elige degradado lineal o radial, ajusta el ángulo y añade opcionalmente una posición de punto de color.
3. Copia el CSS: el código CSS generado usa background-clip: text y -webkit-background-clip: text para el efecto de texto en degradado, cópialo directamente en tu hoja de estilo.

¿Por qué usar el generador de texto en degradado?

El texto en degradado es uno de los efectos CSS modernos más populares para los títulos, logos y textos de llamada a la acción. Conseguirlo requiere una combinación específica de propiedades CSS (background, background-clip, -webkit-text-fill-color) fácil de equivocar. Este generador gestiona la sintaxis entre navegadores automáticamente y ofrece una vista previa en directo para perfeccionar tu degradado antes de escribir una sola línea de código.

Funcionalidades

• Puntos de color múltiples: añade tantos puntos de color como necesites para efectos de degradado complejos.
• Lineal y radial: elige entre degradados lineales direccionales y degradados radiales centrados.
• Control del ángulo: ajusta el ángulo del degradado de 0° a 360° con un selector visual.
• Vista previa en directo: ve tu texto en degradado actualizarse en tiempo real con tu ejemplo.
• CSS multinavegador: la salida incluye los prefijos -webkit y fallbacks para la máxima compatibilidad.

Preguntas frecuentes

¿Cómo funciona el texto en degradado CSS?

El texto en degradado CSS funciona aplicando un degradado al fondo del elemento, luego recortando ese fondo con la forma del texto mediante background-clip: text, y haciendo transparente el color del texto con -webkit-text-fill-color: transparent (o color: transparent). Solo el recorte en forma de texto del degradado es visible.

¿El texto en degradado funciona en todos los navegadores?

El texto en degradado CSS funciona en todos los navegadores modernos, Chrome, Firefox, Safari y Edge. La propiedad -webkit-background-clip: text está bien admitida. Prevé siempre un fallback en color sólido para navegadores muy antiguos mediante la propiedad color.

¿Puedo usarlo en cualquier tamaño de fuente?

Sí. El texto en degradado se adapta perfectamente al tamaño de fuente, es CSS puro, no una imagen, por lo que se mantiene nítido a cualquier resolución, incluidas las pantallas de alta densidad.

Una breve historia del texto con degradado en la web

El texto con degradado se hizo visualmente posible en la web con la propiedad -webkit-background-clip: text de WebKit, una extensión experimental de Safari/Chromium propuesta por el equipo de WebKit en 2008 como una forma de rellenar las formas de los glifos del texto con un fondo arbitrario (degradado, imagen, cualquier cosa). La técnica permaneció no oficial durante años: Firefox lanzó background-clip: text sin prefijo solo en la versión 49 (septiembre de 2016), y el CSS Backgrounds Module Level 4 la formalizó como un borrador de trabajo del W3C a partir de aproximadamente 2018. La sintaxis de degradado subyacente maduró por separado. El CSS Images Module Level 3 (Recomendación del W3C 2017) estandarizó linear-gradient() y radial-gradient() como valores de imagen de primera clase; conic-gradient() siguió en Module Level 4 (Chrome 69 septiembre de 2018, Safari 12.1 marzo de 2019, Firefox 83 noviembre de 2020). La combinación de esas dos especificaciones es lo que hace posible hoy un titular con degradado de una sola línea. La adopción explotó en la comunidad de desarrolladores cuando Tailwind CSS lanzó sus clases utilitarias bg-clip-text en la v1.4 (2020), convirtiendo los titulares con degradado en una primitiva lista para usar. La identidad de marca moderna ahora depende del texto con degradado como firma visual: la serie «Bridges» de Stripe, el logotipo con degradado de Linear, la página de inicio de Vercel, el marketing de WWDC de Apple y la tienda de plantillas de Notion usan todos esta técnica. El patrón combinado background-clip: text + degradado ha reemplazado efectivamente al «PNG de un titular estilizado» que dominaba el diseño web 2005-2015, eliminando una categoría de problemas de accesibilidad y rendimiento de una sola vez.

La anatomía del texto con degradado CSS

• El degradado en sí. background-image: linear-gradient(90deg, #f00, #00f) establece el fondo del elemento en un degradado de 90 grados que va del rojo al azul. El degradado puede ser lineal (direccional), radial (centrado), cónico (barrido rotacional), o cualquiera de las variantes repetidas. Los degradados CSS son valores de imagen, no valores de color, lo que es lo que los hace recortables a una forma de texto.
• background-clip: text. Le dice al navegador que renderice el fondo solo dentro de la geometría de los glifos renderizados. Sin esta única propiedad, el degradado llena toda la caja del elemento; con ella, el degradado queda restringido al contorno del texto. Originalmente una extensión de WebKit con prefijo como -webkit-background-clip: text, ahora también sin prefijo en Firefox 49+ (2016) y navegadores basados en Chromium.
• color: transparent o -webkit-text-fill-color: transparent. Una vez que el fondo está recortado al texto, el resultado visible todavía depende de qué color pinta el propio texto sobre el fondo. Establecer color: transparent (o el -webkit-text-fill-color: transparent con prefijo) permite que el degradado se transparente. Sin esto, el color de texto sólido simplemente se pintaría sobre el degradado recortado.
• La cadena de prefijos -webkit-. Safari, la plataforma con más historial de prefijos acumulados, todavía analiza las propiedades sin prefijo pero las versiones con prefijo permanecen en el código de producción por razones heredadas. La salida de este generador incluye tanto background-clip: text como -webkit-background-clip: text para que la técnica funcione hasta Safari 14 y cualquier navegador heredado basado en WebKit.
• Tipos de degradados y paradas. linear-gradient(angle, color1, color2, ...) va en una dirección; radial-gradient(shape at position, ...) emana de un punto; conic-gradient(from angle at position, ...) barre alrededor como la aguja de un reloj. Cada uno acepta arbitrariamente muchas paradas de color, con posiciones explícitas (red 0%, blue 50%, green 100%) para un control fino sobre dónde comienza y termina cada color.

Patrones reales de uso de texto con degradado

• Titulares de identidad de marca. La serie «Bridges» de Stripe, el héroe de producto de Linear, el banner «Develop. Preview. Ship.» de Vercel usan todos texto con degradado como firma de marca. Los wordmarks de un solo color se sienten anticuados para SaaS en etapa temprana, mientras que los titulares con degradado llevan la señal visual «construido en 2024».
• Titulares de sección héroe. El H1 en una página de aterrizaje es a menudo el único elemento de texto con el presupuesto de diseño más alto. El texto con degradado le da peso visual sin recurrir a un archivo de fuente personalizado, un SVG o una imagen héroe, que todos agregan peso de página y preocupaciones de accesibilidad.
• Páginas de métricas con grandes números. Páginas de precios («$0 para empezar»), llamadas de estadísticas («10× más rápido») y resúmenes de tablero usan texto con degradado para atraer la mirada al número en sí. El degradado reemplaza efectivamente el patrón «círculo de color detrás del número» de diseños más antiguos.
• Botones de llamada a la acción. Un degradado sutil en el texto del CTA (en lugar del fondo del botón) se siente más refinado que un color sólido y combina bien con una superficie de botón glassmorfista o neumórfica. La técnica es común en marcas fintech y de herramientas de diseño.
• Destacados de navegación. Un estado activo o de hover en un enlace de navegación puede usar texto con degradado para proporcionar retroalimentación visual sin agregar un subrayado o un cambio de color de fondo. Este patrón se usa mucho en sitios de documentación (Stripe Docs, Tailwind Docs).
• Modo oscuro y diseños brand-bridge. El texto con degradado funciona particularmente bien en fondos oscuros porque los colores saturados resaltan sin competir contra una superficie clara ocupada. Muchos productos mantienen titulares de color sólido en modo claro y cambian a degradado en modo oscuro (usando un intercambio de variable CSS).
• Destacados de productos de e-commerce. Las insignias «Oferta», «Nuevo», «Edición limitada» y los subtítulos de productos usan texto con degradado para diferenciarse del cuerpo de texto sin requerir activos de iconos. El editor de escaparates de Shopify presenta el texto con degradado como opción integrada en 2024.

Consideraciones de accesibilidad

• WCAG 2.1 SC 1.4.3 Contraste (Mínimo). El criterio de éxito requiere al menos 4,5:1 de contraste entre el texto y el fondo para texto normal (3:1 para texto grande, definido como 18pt+ o 14pt en negrita). El texto con degradado es más difícil de evaluar porque el ratio de contraste varía a lo largo del degradado. El enfoque seguro: asegurarse de que el color más claro de su degradado siga cumpliendo el ratio contra el fondo. Herramientas como WebAIM Contrast Checker y Stark en Figma pueden ayudar.
• Elija primero el color más oscuro del degradado. Al emparejar un degradado con un fondo claro, elegir el color más claro del degradado para superar el ratio 4,5:1 garantiza que el resto del degradado también sea accesible. Lo mismo se aplica en sentido inverso en fondos oscuros. WCAG 2.2 (recomendación octubre de 2023) ajustó la guía sobre la presentación visual, incluido el caso en que el contraste del texto varía a lo largo del trayecto.
• Los lectores de pantalla ven el texto sin cambios. Debido a que el degradado es puramente un estilo visual (background-clip, color), la tecnología asistiva lee el contenido del texto renderizado independientemente de cómo esté coloreado. No hay preocupación de «texto alternativo» con el texto con degradado, a diferencia del texto de imagen rasterizado o del SVG-texto-sin-elemento-texto.
• prefers-reduced-motion. Los degradados animados (transiciones de background-position, animaciones de ciclo de color) deben envolverse en @media (prefers-reduced-motion: no-preference) para que los usuarios con trastornos vestibulares o sensibilidad al movimiento vean un degradado estático. El CSS Working Group agregó la consulta de medios en 2017; el soporte del navegador ha sido universal desde 2020.
• Zoom del navegador y redimensionamiento del texto. WCAG 2.1 SC 1.4.4 requiere que el texto sea redimensionable hasta 200% sin pérdida de contenido. El texto con degradado escala perfectamente porque es puramente renderizado por CSS (sin rasterización). Los usuarios con baja visión que usan zoom Ctrl+/Cmd+ verán que el degradado permanece nítido en cualquier nivel de zoom.
• Hojas de estilo de impresión. La mayoría de los navegadores eliminan los colores recortados al fondo al imprimir porque la página impresa espera tinta sobre papel, y los fondos de degradado desaparecen. Proporcione siempre una anulación @media print que establezca un color sólido en el texto con degradado para que las copias impresas sigan siendo legibles. Muchos diseñadores olvidan esto; imprimir un titular con degradado a menudo produce texto invisible.
• Cadena de color de respaldo. Establezca siempre primero una propiedad color sólida, luego agregue color: transparent (o -webkit-text-fill-color: transparent) para que los navegadores sin soporte para background-clip: text (IE heredado, navegadores Android muy antiguos) sigan viendo texto en color sólido en lugar de texto invisible. La salida del generador incluye este respaldo por defecto.

Más preguntas frecuentes

¿Por qué el texto con degradado se considera una firma de marca moderna?

Dos razones. Primero, la razón técnica: el texto con degradado se volvió totalmente compatible entre navegadores solo alrededor de 2017-2020, por lo que los diseños que lo usan llevan visiblemente la señal «construido recientemente», de la misma manera que el flat design decía «2013» o que el skeuomorfismo decía «2010». Segundo, la razón cultural: Stripe, Linear, Vercel y Apple WWDC popularizaron el texto con degradado como elemento de identidad de marca en la ola 2020-2024 del marketing de fintech y herramientas para desarrolladores. Adoptar el mismo lenguaje visual señala pertenencia a ese linaje de diseño.

¿Cómo animo un efecto de texto con degradado?

La técnica más común anima background-position en un degradado sobredimensionado. Establezca background-size: 200% 200% y anime background-position de 0% 0% a 100% 100% en un bucle de 3-5 segundos. Envuelva siempre los keyframes en @media (prefers-reduced-motion: no-preference) para que los usuarios con sensibilidad al movimiento vean la versión estática. Evite animar paradas de color individuales directamente: CSS actualmente no interpola entre valores de degradado de forma fluida entre navegadores, aunque CSS @property (Recomendación candidata del W3C 2022) está empezando a habilitar esto.

¿Pueden los motores de búsqueda y los lectores de pantalla ver el texto con degradado?

Sí. El texto con degradado es texto HTML puro estilizado con CSS; el DOM todavía contiene los caracteres reales. Google, Bing, los lectores de pantalla (NVDA, JAWS, VoiceOver) y cualquier herramienta de extracción de texto leen el contenido exactamente como si fuera texto normal de color sólido. Esta es una de las principales razones por las que el texto CSS con degradado reemplazó al antiguo patrón «PNG de un titular estilizado»: esas imágenes eran invisibles para la búsqueda y los lectores de pantalla sin texto alternativo manual.

¿Funciona el texto con degradado en correos HTML?

Mayormente no. Outlook desktop (motor de renderizado de Word) elimina background-clip; el cliente web de Gmail lo admite de forma inconsistente; Apple Mail y los clientes Gmail móviles modernos generalmente lo renderizan correctamente. Para campañas por correo, el enfoque más seguro es enviar un titular de color sólido de respaldo y tratar el texto con degradado como «mejora progresiva» para clientes que lo admitan. Algunos equipos pre-componen el titular como PNG/SVG con texto alternativo y aceptan el compromiso de accesibilidad.

¿Qué colores funcionan mejor juntos en un degradado de texto?

Tres patrones dominan. Análogos (colores uno al lado del otro en la rueda, p.ej. azul → púrpura → rosa) da resultados suaves, amigables con la marca, y es el predeterminado para la mayoría de los sistemas de diseño modernos. Complementarios (opuestos en la rueda, p.ej. azul → naranja) crea un contraste fuerte pero puede parecer chillón en texto largo. Matizado de marca (su color de marca principal con variación sutil de luminosidad/saturación) produce un efecto sofisticado que se siente integrado en lugar de decorativo. Evite mezclar más de tres colores en un solo titular; los degradados complejos están mejor reservados para iconos y elementos gráficos.