# Texto con degradado en CSS, bien hecho

[Canonical HTML page](https://gradiently.design/es/guide/css-gradient-text)

Tres líneas de CSS ponen un degradado dentro de tus letras. Hacerlo legible, robusto y con gusto lleva unas cuantas más, y saber cuándo dejar el texto liso.

## The short version

- El texto con degradado en CSS funciona pintando un degradado como fondo del elemento, recortándolo con la forma de las letras mediante background-clip: text y haciendo transparente el color del texto.
- Define siempre primero un color de texto liso y aplica el color transparente solo dentro de una comprobación @supports, para que las palabras nunca desaparezcan.
- Cada parte del degradado necesita suficiente contraste con el fondo, así que comprueba los puntos más claro y más oscuro, no solo uno.
- El texto con degradado va bien en líneas cortas de titular a tamaños grandes y funciona mal para el texto de cuerpo, los enlaces y las etiquetas pequeñas.
- Añadir box-decoration-break: clone da a cada línea de un elemento en línea partido en varias líneas su propio degradado completo.

El **texto con degradado** en CSS se hace pintando un degradado como fondo del elemento de texto, recortando ese fondo con la forma de las letras mediante `background-clip: text` y haciendo transparente el propio texto para que se vea el degradado. Lleva tres declaraciones, funciona en todos los navegadores actuales y sigue siendo texto real, seleccionable y que se puede buscar, no una imagen.

```css
.gradient-text {
  background-image: linear-gradient(90deg, #6d28d9, #be185d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

La técnica básica. La línea con prefijo mantiene contentas las versiones antiguas de Safari y Chromium.

De violeta a rosa, para páginas claras: `linear-gradient(90deg, #6d28d9, #be185d)`

El degradado dentro de esas letras. Ambos extremos son lo bastante oscuros para leerse sobre blanco.

El resto de esta guía trata de lo que hace mal la versión de tres líneas: alternativas que faltan, contraste, texto en varias líneas, descendentes recortados y la cuestión de diseño de cuándo ayuda siquiera el texto con degradado. Para el aspecto de las letras con degradado en redes y trabajo de marca, no en la web, mira los [efectos de texto](https://gradiently.design/es/guide/text-effects).

## Una receta robusta de texto con degradado con alternativas

Si un navegador aplica `color: transparent` pero no el recorte, el texto desaparece. Protégete: dale al elemento un color liso sacado del degradado y pasa a la versión transparente solo cuando el navegador confirme que la admite. Añade un restablecimiento para el modo de colores forzados, donde el sistema sustituye tus colores y el texto debe seguir visible.

```css
.gradient-text {
  color: #6d28d9; /* solid fallback from the gradient */
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(90deg, #6d28d9, #be185d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .gradient-text {
    background: none;
    color: CanvasText;
  }
}
```

Primero un color liso, degradado solo donde se admita y un color del sistema cuando la persona fuerza los suyos.

La [página de MDN sobre background-clip](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip) documenta el valor `text` y su compatibilidad actual.

## Contraste: comprueba los dos extremos del degradado

Un comprobador de contraste toma un solo color de texto, pero el texto con degradado tiene muchos. Las palabras son tan legibles como su parte más débil, así que comprueba el punto más claro y el más oscuro frente al fondo, y mira también el medio, porque una mezcla sRGB puede quedar más clara o más apagada que cualquiera de los extremos. Para texto grande de titular, WCAG pide al menos 3:1; para texto normal, 4,5:1. El [contraste de color](https://gradiently.design/es/guide/color-contrast-accessibility) explica las relaciones.

- Sobre blanco: de violeta a rosa: `linear-gradient(90deg, #6d28d9, #be185d)`
- Sobre blanco: de océano a verde azulado: `linear-gradient(90deg, #0369a1, #0f766e)`
- Sobre blanco: de brasa a rosa: `linear-gradient(90deg, #c2410c, #be185d)`
- Sobre casi negro: de lila a rosa: `linear-gradient(90deg, #a78bfa, #f472b6)`
- Sobre casi negro: de cian a limón: `linear-gradient(90deg, #67e8f9, #fde047)`

Degradados de texto cuyos puntos superan todos 5:1 sobre el fondo indicado. Sobre blanco, cada punto mide más de 5:1; sobre #0b0b12, más de 7:1.

> **El fallo común** Un degradado que se desvanece hacia un color pálido, como de violeta a rosa claro sobre blanco, deja casi invisible el final de cada palabra. Mantén ambos extremos con una luminosidad parecida y segura y deja que el tono haga el cambio.

## Arreglar el texto con degradado en varias líneas y las letras recortadas

En un elemento en línea que se parte, el navegador extiende un solo fondo por todas las líneas como si fueran una única tira, así que la primera línea recibe el comienzo del degradado y la última el final. Normalmente quieres que cada línea lleve el degradado completo. `box-decoration-break: clone` lo consigue. En elementos de bloque, como un título, el degradado ya abarca toda la caja, así que un degradado largo en un título ancho puede mostrar solo su parte central en las líneas cortas.

```css
.gradient-text {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* stop descenders being cut off */
  line-height: 1.15;
  padding-block-end: 0.08em;
}
```

Cada línea recibe su propio degradado completo y las colas de g, j, p e y quedan dentro del área pintada.

Los descendentes recortados son la otra sorpresa. El fondo solo pinta la caja del elemento, así que con un `line-height` muy ajustado, las partes de las letras que cuelgan por debajo quedan transparentes y desaparecen. Una altura de línea de aproximadamente 1,1 o un poco de padding inferior lo arregla. Las tipografías de titular en cursiva pueden perder la punta de su última letra por la derecha por el mismo motivo; un toque de padding en línea ayuda.

## Cuándo funciona el texto con degradado y cuándo no

### Evita

- Texto de cuerpo, donde el cambio de color ralentiza la lectura
- Enlaces y botones, donde el color indica el estado
- Etiquetas pequeñas de menos de unos 24px, donde el degradado ni se ve
- Degradados arcoíris con cinco o más tonos
- Texto con degradado sobre un fondo degradado

### Úsalo para

- Una palabra o frase corta en un titular grande
- El nombre de un producto o marca en un hero
- Números grandes en un bloque de estadísticas
- Dos o tres tonos relacionados de luminosidad parecida
- Fondos lisos y serenos que dejen liderar a las letras

Una buena regla: el texto con degradado es un acento, como la cursiva. Una palabra resaltada en un titular llama la atención; un párrafo entero de ello la cansa. Los pesos gruesos ayudan, porque los trazos finos no muestran suficiente color para leerse como degradado. Si el resto de la página ya usa fondos degradados, la tipografía plana suele ser la opción más fuerte; el [texto sobre fondos degradados](https://gradiently.design/es/guide/text-on-gradient) cubre ese caso.

## Animar el texto con degradado

Para que el color fluya por las letras, haz el fondo más grande que el texto y muévelo. Dale un 200% de ancho y anima `background-position` de ida y vuelta con `alternate`, para que nunca haya un salto cuando el bucle se reinicia. Respeta los ajustes de [movimiento reducido](https://gradiently.design/es/guide/reduced-motion) y mantenlo lento: un destello cada pocos segundos se lee como acabado cuidado, un ciclo rápido se lee como una advertencia.

```css
.gradient-text--flow {
  background-image: linear-gradient(90deg, #6d28d9, #be185d, #c2410c);
  background-size: 200% 100%;
  animation: flow 6s ease-in-out infinite alternate;
}

@keyframes flow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text--flow { animation: none; }
}
```

El color yendo y viniendo por las palabras. Combínalo con el recorte y la alternativa de la receta de arriba.

Los mismos trucos de fondo dan vida a los [degradados animados en CSS](https://gradiently.design/es/guide/css-animated-gradient) en general, y los contornos con degradado, en lugar de rellenos, se tratan en los [bordes con degradado en CSS](https://gradiently.design/es/guide/css-gradient-border).

## FAQ

### ¿Cómo hago texto con degradado en CSS?

Define un degradado como `background-image`, añade `-webkit-background-clip: text` y `background-clip: text` y pon `color: transparent`. Pon un color liso fuera de una comprobación `@supports` como alternativa.

### ¿Por qué mi texto con degradado es invisible?

El texto es transparente pero el fondo no se está recortando, normalmente porque falta la declaración del recorte, está mal escrita o no se admite. Aplica `color: transparent` solo dentro de `@supports (background-clip: text)`.

### ¿Es accesible el texto con degradado?

Puede serlo, si cada parte del degradado tiene suficiente contraste con el fondo y el texto sigue siendo texto real. Comprueba los puntos más claro y más oscuro y restablece los colores en el modo de colores forzados.

### ¿Por qué se cortan las partes de abajo de mis letras?

El fondo recortado solo cubre la caja del elemento, así que una altura de línea ajustada deja los descendentes fuera de ella. Sube la altura de línea a aproximadamente 1,1 o añade un poco de padding inferior.

### ¿Puedo usar texto con degradado en correos?

La compatibilidad con `background-clip: text` es irregular entre los clientes de correo, así que usa allí un color liso o una imagen con texto alternativo. Mira los [degradados en el correo](https://gradiently.design/es/guide/gradients-in-email).