Generador de texto con degradado CSS

Funciones

• Degradados lineal, radial y cónico
• De 2 a 4 paradas, cada una con su posición ajustable
• Un ángulo ajustable que gobierna tanto el lineal como el cónico
• Vista previa del texto en vivo que se redibuja con cada tecla y cada cambio de color
• Tanto la declaración de recorte de fondo estándar como la de -webkit-
• Basta con empezar a escribir para previsualizar; en vacío se muestra una pista
• El código entregado incluye el respaldo con @supports not
• El código entregado incluye el arreglo de selección con ::selection
• Todo se calcula en tu navegador: no se sube nada

Cómo se usa

1. Elige el tipo de degradado y ajusta el ángulo
2. Selecciona los colores de los extremos con el selector y marca paradas intermedias si hacen falta
3. Escribe en la caja y comprueba la vista previa
4. Copia el CSS de abajo; el prefijo, el respaldo y el arreglo de selección van dentro

Preguntas frecuentes

¿Por qué ha desaparecido por completo mi texto con degradado?

Casi siempre es que falta `background-clip: text`. El degradado se ve a través de las letras solo porque el fondo se recorta a su forma; `color: transparent` se limita a hacer transparentes las letras. Si falta una de las dos, o no ves el degradado o pierdes el texto entero. Esta herramienta emite las dos juntas, así que el código copiado de aquí nunca tiene esa media configuración. La otra posibilidad es un navegador sin soporte de recorte, y en ese caso usa el respaldo con `@supports not` del código entregado.

¿Por qué no se ve el resaltado al seleccionar?

Porque el texto mismo es transparente, y `::selection` solo tiñe esa transparencia, así que no se ve ningún resaltado. El arreglo es devolver un relleno visible en el estado seleccionado: la regla `.gradient-text::selection` entregada fija tanto `color` como `-webkit-text-fill-color`, y esta última es la que WebKit lee de verdad.

¿Por qué el prefijo -webkit-?

`background-clip: text` todavía no es una función base en todas partes, y Safari / WebKit solo entiende `-webkit-background-clip`. Con la forma estándar sola, en esos navegadores el recorte se descarta y es muy probable que el texto quede invisible. Por eso se escriben las dos y cada navegador toma la que necesita.

¿Se puede usar texto con degradado en párrafos largos?

No es aconsejable. El recorte de fondo extiende un degradado por todo el elemento y lo corta a la forma del texto, así que con muchas líneas el degradado se estira mucho y cada línea cae en una parte distinta del espectro, lo que se lee como ruido; además la legibilidad oscila con el color que quede detrás de cada línea. Va bien en textos cortos: títulos, etiquetas de botón, un logotipo. Para un párrafo largo es más seguro un color plano, o el efecto en unas pocas palabras clave.