Generador de texto degradado CSS
Diseña texto degradado de forma visual: arrastra las paradas de color, ajusta el ángulo o cambia a degradados radiales y cónicos, y previsualízalo con tus propias palabras y fuente. Copia CSS limpio que usa background-clip: text con un color sólido de respaldo, además de HTML o clases de Tailwind.
Última actualización:
Paradas de color
Degradado
Cómo usar Generador de texto degradado CSS
- Elige un ajuste predefinido como Atardecer, Océano o Arcoíris, o pulsa Aleatorio.
- Edita las paradas de color: arrastra un controlador a lo largo de la barra, haz clic en la barra para añadir una parada o cambia el color y la posición en la lista.
- Define la dirección con el control deslizante de ángulo, o cambia el tipo a radial o cónico.
- Escribe tu texto y elige la fuente, el tamaño, el grosor y el fondo para que coincidan con tu sitio.
- Copia el CSS (o el HTML / Tailwind) y añade la clase a tu título.
Cómo funciona el texto degradado en CSS
CSS no puede rellenar el texto con un degradado directamente, porque color solo acepta un color. El truco es pintar el degradado como fondo del elemento, recortar ese fondo a la forma de los glifos y hacer transparentes los propios glifos:
| Propiedad | Por qué es necesaria |
|---|---|
background-image: linear-gradient(…) | Pinta el degradado detrás del texto |
-webkit-background-clip: text | Recorta el fondo a las letras en Safari y en navegadores Chromium antiguos |
background-clip: text | Versión estándar sin prefijo (Firefox, Chrome 120+) |
-webkit-text-fill-color: transparent | Hace transparente el relleno de las letras para que se vea el fondo recortado |
color (respaldo) | Un color sólido que se usa donde no se admite el recorte, para que el texto nunca desaparezca |
Texto con degradado lineal, radial y cónico
- Los degradados lineales siguen un ángulo:
90degva de izquierda a derecha,180degde arriba abajo y0degde abajo arriba. Es la opción clásica para títulos. - Los degradados radiales empiezan en el centro de la caja de texto y se expanden hacia fuera, lo que da un centro luminoso en palabras cortas.
- Los degradados cónicos giran alrededor del centro como una rueda de color; repite el primer color al 100% para un ciclo sin cortes.
Consejos para un texto degradado atractivo
- Usa grosores gruesos (700–900) y tamaños grandes: los trazos finos muestran muy poco del degradado.
- Los degradados se recortan a la caja del elemento, así que en un título de ancho completo los colores se reparten por toda la línea. Usa
display: inline-blockpara ajustar el degradado a las palabras. - Mantén suficiente contraste en ambos extremos: la herramienta muestra la relación de contraste más baja entre cualquier parada y el fondo. Las WCAG piden 3:1 para texto grande y 4.5:1 para texto normal.
- Los trazos descendentes, como los de la g y la y, pueden cortarse con interlineados ajustados; añade un poco de
padding-bottomsi las letras se ven cortadas.
Preguntas frecuentes
¿Cómo se hace texto degradado en CSS?
Dale al texto un background-image con degradado, recorta ese fondo a la forma de las letras con background-clip: text (más -webkit-background-clip: text para Safari y Chrome antiguos) y haz transparente el relleno de las letras con -webkit-text-fill-color: transparent o color: transparent. Así el degradado solo se ve a través de los glifos.
¿Por qué necesito el prefijo -webkit-?
Chrome, Edge y Opera solo admiten background-clip: text sin prefijo desde la versión 120, y Safari todavía necesita -webkit-background-clip: text. Incluir ambas líneas cubre todos los navegadores actuales.
¿Para qué sirve el color de respaldo?
Si un navegador no puede recortar fondos al texto, un color de texto transparente haría invisible el texto. El CSS generado define primero un color sólido normal y solo cambia al degradado dentro de @supports, así que los navegadores antiguos y algunos contextos de correo o impresión siguen mostrando texto legible.
¿Puedo animar un texto degradado?
Sí. Haz el fondo más grande que el elemento (por ejemplo background-size: 200% auto) y anima background-position con @keyframes. Activa Animar para obtener el código; respeta prefers-reduced-motion, así que los usuarios que desactivan el movimiento ven un degradado fijo.
¿El texto degradado funciona bien con la selección y la accesibilidad?
Los lectores de pantalla leen el texto con normalidad porque solo cambia la pintura. Comprueba el contraste en ambos extremos del degradado frente al fondo, ya que las paradas claras sobre una página clara pueden ser difíciles de leer. El texto seleccionado puede verse distinto porque el relleno es transparente.
¿Por qué mi degradado se ve cortado en texto de varias líneas?
Por defecto, el fondo cubre todo el elemento, así que cada línea muestra solo una parte del degradado. Añade box-decoration-break: clone (con el prefijo -webkit-) en un elemento en línea para repetir el degradado en cada línea, o limita el texto degradado a títulos cortos.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.