Texto arcoíris en CSS

Funciones

• Un degradado arcoíris recortado a la forma del texto con `background-clip: text`; el resultado es una regla CSS
• Entre dos y doce bandas de color, con las posiciones de parada escritas en porcentaje, así que la colocación es determinista
• Direcciones: de izquierda a derecha, de arriba abajo, diagonal 135° y de derecha a izquierda
• Saturación y luminosidad ajustables, así que tanto un diseño claro como uno oscuro encuentran su ajuste
• Se incluyen las declaraciones con prefijo `-webkit-`, de modo que Safari y Chrome antiguos también lo dibujan
• La vista previa se actualiza en vivo; copia cuando te convenza
• El resultado lleva el selector `.rainbow-text`, listo para pegar en una hoja de estilos
• Todo se ejecuta en tu navegador y tu texto no se sube

Cómo se usa

1. Escribe unos caracteres en la casilla de arriba
2. Elige la dirección del degradado y cuántas bandas de color
3. Ajusta la saturación y la luminosidad hasta acertar con el peso
4. Copia el CSS sobre tu encabezado

Preguntas frecuentes

¿Por qué veo un rectángulo de color sobre las palabras, o las palabras no se ven?

Los dos casos vienen de una declaración que falta, y por motivos opuestos. Un rectángulo de color significa que el fondo no se recortó a la forma del texto: falta la declaración `background-clip` (incluida la versión con prefijo `-webkit-`, la única que respetan Safari y Chrome antiguos). Texto invisible significa que el color de las letras no se apartó: falta `color: transparent`, así que un color opaco se pone sobre el degradado y la zona parece vacía. La regla completa que aparece arriba los incluye todos.

¿Por qué no colorear cada letra por separado?

Porque colorear letra a letra obliga a envolver cada carácter en un `<span>`, o sea, a modificar la estructura HTML. Estos generadores devuelven un trozo de CSS: el texto de la vista previa lo escribe la página con `textContent`, y el módulo no tiene acceso al DOM ni debería tenerlo. `background-clip: text` es la respuesta estándar, y además su resultado dura más: una regla CSS con un nombre de clase funciona en cualquier encabezado, mientras que la solución del span hay que rehacerla cada vez que cambia el texto o cuando el contenido viene de un gestor.

He envuelto el texto en un span y ha desaparecido el color. ¿Por qué?

Porque el texto tiene que quedarse en el elemento que lleva la clase. `background-clip: text` recorta el fondo del propio elemento, y el texto dentro de un hijo queda fuera del recorte, así que conserva su color; y `color: transparent` tampoco ayuda, porque lo que falta es el fondo del padre bajo esos glifos. Así que `<h1 class="rainbow-text">Título</h1>` es correcto, y añadir un `<span>` dentro no lo es.