# Un fondo que se adapta al texto: así le hace sitio un Mark

[Canonical HTML page](https://gradiently.design/es/guide/text-reacts-to-background)

La mayoría de los fondos son imágenes, y una imagen no sabe dónde está tu titular. Un Mark sí, y se reorganiza para dejar pasar las palabras en vez de esconderse tras una caja.

## The short version

- Un Mark de Gradiently es un fondo que se adapta al texto, porque se dibuja en directo y sabe dónde están las palabras del diseño.
- Tras tus palabras, un Mark coloca su región más tranquila y de mejor contraste, oscurece o aclara los colores junto a las letras y suaviza el detalle recargado.
- La reacción no usa cajas, sombras ni desenfoque, así que el fondo se mantiene entero y las palabras se siguen leyendo.
- Tú eliges con qué fuerza responde un Mark, de Desactivado a Intenso pasando por Invisible, Sutil y Claro, y puedes afinarlo con Tono, Calma, Curva y Alcance.
- Como el Mark se dibuja de nuevo para cada tamaño, vuelve a hacer sitio dondequiera que caigan las palabras en cada formato.

Un Mark de Gradiently es un **fondo que se adapta al texto**. Como se dibuja en directo y no se guarda como una imagen, sabe dónde están tus palabras y se reorganiza a su alrededor: la parte más tranquila y de mejor contraste del material pasa detrás del texto, los colores junto a las letras se oscurecen o se aclaran y el detalle recargado se suaviza. No se coloca nada encima. Sin cajas, sin sombras y sin desenfoque: conservas todo el fondo y las palabras se siguen leyendo.

## Las formas habituales de hacer legible un texto y lo que cuestan

Pon un titular sobre un degradado vivo o una foto y parte de él desaparece. Los arreglos de siempre funcionan tapando el fondo, un resultado extraño cuando el fondo era justo la razón por la que elegiste ese diseño.

### Tapar el fondo

- Una caja sólida o esmerilada detrás de las palabras
- Una sombra paralela en cada letra
- Desenfocar la zona detrás del texto
- Una capa oscura sobre toda la imagen

### Un Mark que hace sitio

- Su región tranquila se mueve adonde están las palabras
- Los colores junto a las letras se oscurecen o se aclaran
- El grano, las crestas y los destellos se calman tras el texto
- El resto del fondo sigue tan vivo como antes

Cada arreglo tiene su lugar sobre una imagen plana, y [el texto sobre un fondo degradado](https://gradiently.design/es/guide/text-on-gradient) los repasa con honestidad. La diferencia con un Mark es que el fondo participa, en lugar de quedar tapado.

## Lo que hace un Mark alrededor de tus palabras

1. **Se asienta** El material se desplaza para que tus palabras caigan sobre su parte más tranquila. La luz que habría quedado tras el titular se va al espacio libre de alrededor.
2. **Cambia de tono** Junto a las letras, la paleta se desliza hacia un color que contrasta con el texto: más oscuro tras tinta clara, más claro tras tinta oscura.
3. **Se calma** La deformación, la agitación y el detalle fino se relajan tras las palabras, así que una textura fuerte nunca corta un trazo fino.
4. **Se curva en los bordes** Los patrones se curvan un poco en el borde de las palabras en lugar de atravesarlas en línea recta.

Un cartel de evento para una noche de apertura de un museo, donde la zona más brillante del degradado queda tras el título

Reacción desactivada: el material atraviesa las palabras, igual que haría una imagen plana.

El mismo cartel del museo, donde el degradado se ha asentado en un tono tranquilo y más profundo tras el título y los detalles

Reacción activada: el mismo Mark asienta una zona más profunda y quieta tras el texto y conserva su color en el resto.

La reacción trabaja codo con codo con la [Tinta automática](https://gradiently.design/es/guide/auto-ink-legibility), que elige la tinta clara u oscura del Mark para cada línea. El fondo hace el sitio; la Tinta automática elige el color que lo llena.

## Elegir con qué fuerza responde el fondo

Tú decides cuánto cede el Mark. El panel se llama Alrededor de tus palabras y empieza con cinco niveles.

| Nivel | Qué hace | Ideal para |
| --- | --- | --- |
| Desactivado | El material ignora tus palabras | Fondos de pantalla y láminas sin texto |
| Invisible | Actúa solo donde hace falta; nadie lo notará | Titulares grandes y contundentes sobre Marks tranquilos |
| Sutil | Equilibrado: el aspecto se mantiene y las palabras se leen | La mayoría de publicaciones y stories |
| Claro | Las palabras siempre ganan | Menús, listas de precios, datos de eventos |
| Intenso | El máximo contraste posible, con la calma algo más amplia | Texto pequeño, textos largos, carteles que se leen desde lejos |

Cinco puntos de partida. Sutil es un buen valor por defecto; sube de nivel cuando las palabras sean más pequeñas o más largas.

Bajo los niveles hay cuatro mandos de ajuste fino: **Tono** define cuánto se asienta el material tras las palabras para dar contraste, **Calma** cuánto se relajan la deformación y la agitación, **Curva** cuánto se curva el patrón en el borde de las palabras y **Alcance** si se ciñe a cada letra o responde alrededor de todo el bloque de texto.

> **El Alcance es el mando que casi todo el mundo necesita** Para un titular corto, un alcance estrecho mantiene el fondo vivo hasta las letras. Para un párrafo o una lista, un alcance más amplio calma una zona clara para todo el bloque, que se lee mejor.

## Por qué importa en cada tamaño

Una imagen de fondo plana se compone una sola vez. Recórtala para una story y el punto brillante puede caer justo tras el titular. Un Mark se dibuja de nuevo para cada formato, así que cuando un diseño pasa de publicación a story y a banner, las palabras se mueven y el Mark vuelve a hacer sitio dondequiera que caigan. Eso permite que [un mismo estilo funcione en cada tamaño](https://gradiently.design/es/guide/one-look-every-size).

- Publicación 1080×1350: 1080 × 1350
- Story 1080×1920: 1080 × 1920
- Cabecera de X 1500×500: 1500 × 500
- Miniatura de YouTube 1280×720: 1280 × 720

Cuatro formas, cuatro lugares distintos para el titular. La zona tranquila sigue a las palabras en cada una.

## Una versión sencilla de la idea en CSS

En la web puedes tomar prestado el principio con un degradado simple: pon la parte más profunda y tranquila del fondo donde esté el texto y deja el color en los bordes. No seguirá a las palabras si cambia la maquetación, pero es mejor que una caja.

Zona tranquila y profunda colocada tras el texto: `radial-gradient(ellipse 70% 45% at 35% 62%, #1b1030 0%, #2e1745 40%, #8a3f6e 75%, #f0a46f 100%)`

El bloque de texto queda en la elipse ciruela oscura abajo a la izquierda; el melocotón y el rosa siguen vivos hacia los bordes.

```css
.hero {
  min-height: 70vh;
  display: grid;
  align-content: end;
  padding: 8vh 6vw;
  color: #fbf3ea;
  background: radial-gradient(
    ellipse 70% 45% at 35% 62%,
    #1b1030 0%,
    #2e1745 40%,
    #8a3f6e 75%,
    #f0a46f 100%
  );
}
```

Mueve la posición de la elipse adonde esté tu encabezado. [El CSS de superposición de degradado](https://gradiently.design/es/guide/css-gradient-overlay) muestra el mismo truco sobre una foto.

## Cuándo bajar la reacción

No todos los diseños piden la máxima legibilidad. Un fondo de pantalla de móvil no tiene palabras, así que Desactivado es lo correcto. Un lettering enorme, una sola palabra a lo ancho de un cartel, puede sostenerse solo y a menudo queda mejor con Invisible. Los tratamientos de lettering como Contorno o Relieve, que vemos en [los efectos de lettering](https://gradiently.design/es/guide/lettering-treatments), ya llevan su propio contraste. Reserva los niveles fuertes para lo que los necesita: letra pequeña, detalles largos y todo lo que se lee con prisa.

## FAQ

### ¿Cómo se adapta un Mark de Gradiently al texto?

Mueve su zona más tranquila y de mejor contraste tras tus palabras, oscurece o aclara los colores junto a las letras y suaviza el detalle recargado, todo sin cajas, sombras ni desenfoque.

### ¿Puedo evitar que el fondo reaccione a mi texto?

Sí. Pon la reacción en Desactivado y el material ignora tus palabras, algo ideal para fondos de pantalla y diseños sin texto.

### ¿Qué nivel de reacción debo usar?

Sutil va bien para la mayoría de publicaciones y stories. Usa Claro o Intenso para texto pequeño, textos largos, menús y todo lo que se lee a distancia.

### ¿Funciona la reacción al cambiar el tamaño de un diseño?

Sí. Un Mark se dibuja de nuevo para cada tamaño, así que vuelve a hacer sitio dondequiera que caigan las palabras en el nuevo formato.