# Fundo que se adapta ao texto: como um Mark abre espaço

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

A maioria dos fundos são imagens, e imagens não sabem onde está o seu título. Um Mark sabe, então ele se reorganiza para deixar as palavras passarem, em vez de se esconder atrás de uma caixa.

## The short version

- Um Mark do Gradiently é um fundo que se adapta ao texto, porque é desenhado ao vivo e sabe onde estão as palavras do design.
- Atrás das suas palavras, o Mark leva para o lugar a região mais calma e de melhor contraste, escurece ou clareia as cores perto das letras e relaxa o detalhe agitado.
- A reação não usa caixas, sombras nem desfoque, então o fundo continua inteiro e as palavras continuam legíveis.
- Você escolhe a intensidade da resposta do Mark, de Desativado a Invisível, Sutil, Claro e Forte, e pode ajustar com Tom, Calma, Curvatura e Alcance.
- Como o Mark é desenhado de novo para cada tamanho, ele abre espaço outra vez onde as palavras caírem em cada formato.

Um Mark do Gradiently é um **fundo que se adapta ao texto**. Como é desenhado ao vivo, e não guardado como imagem, ele sabe onde estão as suas palavras e se reorganiza ao redor delas: a parte mais calma e de melhor contraste do material vai para trás do texto, as cores perto das letras escurecem ou clareiam e o detalhe agitado relaxa. Nada é colocado por cima. Não há caixas, sombras nem desfoque, então você mantém o fundo inteiro e as palavras continuam legíveis.

## As formas habituais de deixar o texto legível e o que elas custam

Ponha um título sobre um gradiente ou uma foto cheios de vida e parte dele desaparece. As soluções-padrão funcionam todas cobrindo o fundo, o que é um resultado estranho quando o fundo era o motivo de você ter escolhido o design.

### Cobrir o fundo

- Uma caixa sólida ou fosca atrás das palavras
- Uma sombra projetada em cada letra
- Desfocar a área atrás do texto
- Uma camada escura sobre a imagem inteira

### Um Mark abrindo espaço

- A região calma vai para onde estão as palavras
- As cores perto das letras escurecem ou clareiam
- Grão, relevos e clarões relaxam atrás do texto
- O resto do fundo continua tão vivo quanto antes

Cada solução tem seu lugar numa imagem chapada, e [texto sobre fundo em gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) trata delas com honestidade. A diferença com um Mark é que o fundo participa, em vez de ser mascarado.

## O que um Mark faz ao redor das suas palavras

1. **Ele se acomoda** O material se desloca para que suas palavras caiam na parte mais calma. A luz que ficaria atrás do título flutua para o espaço livre ao redor.
2. **Ele muda de tom** Perto das letras, a paleta desliza para uma cor que contrasta com o texto: mais escura atrás de tinta clara, mais clara atrás de tinta escura.
3. **Ele acalma** Distorção, agitação e detalhe fino relaxam atrás das palavras, então uma textura forte nunca corta um traço fino.
4. **Ele se curva nas bordas** Os padrões se curvam levemente na borda das palavras em vez de passar reto por elas.

Um pôster de evento para uma abertura noturna de museu em que a área mais clara do gradiente fica atrás do título

Reação desativada: o material passa reto pelas palavras, exatamente como numa imagem chapada.

O mesmo pôster do museu, em que o gradiente se acomodou num tom calmo e mais profundo atrás do título e dos detalhes

Reação ativada: o mesmo Mark acomoda uma área mais profunda e quieta atrás do texto e mantém a cor no resto.

A reação trabalha de mãos dadas com a [Tinta automática](https://gradiently.design/pt-br/guide/auto-ink-legibility), que escolhe a tinta clara ou escura do Mark para cada linha. O fundo abre o espaço; a Tinta automática escolhe a cor certa para preenchê-lo.

## Escolhendo a intensidade da resposta do fundo

Você decide o quanto o Mark cede. O painel para isso se chama Ao redor das suas palavras e começa com cinco níveis.

| Nível | O que faz | Bom para |
| --- | --- | --- |
| Desativado | O material ignora suas palavras | Papéis de parede e impressões de arte sem texto |
| Invisível | Age só onde é preciso; ninguém vai notar | Títulos grandes e fortes em Marks calmos |
| Sutil | Equilibrado: o visual fica, as palavras se leem | A maioria dos posts e stories |
| Claro | As palavras sempre vencem | Cardápios, tabelas de preço, detalhes de eventos |
| Forte | O máximo de contraste, com a calma um pouco mais larga | Texto pequeno, texto longo, placas lidas do outro lado da sala |

Cinco pontos de partida. Sutil é um padrão sensato; suba sempre que as palavras ficarem menores ou mais longas.

Sob os níveis há quatro botões de ajuste fino: **Tom** define o quanto o material se acomoda atrás das palavras para dar contraste, **Calma** o quanto a distorção e a agitação relaxam, **Curvatura** o quanto o padrão se curva na borda das palavras e **Alcance** se ele acompanha cada letra ou responde em torno de todo o bloco de texto.

> **Alcance é o ajuste de que a maioria precisa** Para um título curto, um alcance estreito mantém o fundo vivo até junto das letras. Para um parágrafo ou uma lista, um alcance maior acalma uma área clara para o bloco inteiro, que é mais fácil de ler.

## Por que importa em todos os tamanhos

Uma imagem de fundo chapada é diagramada uma única vez. Corte-a para um story e o ponto brilhante pode cair bem atrás do título. Um Mark é desenhado de novo para cada formato, então, quando um design passa de post para story e para banner, as palavras se movem e o Mark abre espaço outra vez onde elas caírem. É isso que deixa [um visual funcionar em todos os tamanhos](https://gradiently.design/pt-br/guide/one-look-every-size).

- Post 1080×1350: 1080 × 1350
- Story 1080×1920: 1080 × 1920
- Cabeçalho do X 1500×500: 1500 × 500
- Miniatura do YouTube 1280×720: 1280 × 720

Quatro formatos, quatro lugares diferentes para o título. A área calma acompanha as palavras em cada um.

## Uma versão simples da ideia em CSS

Na web você pode emprestar o princípio com um gradiente comum: ponha a parte mais profunda e calma do fundo onde fica o texto e deixe a cor nas bordas. Ele não vai acompanhar as palavras quando o layout mudar, mas é melhor que uma caixa.

Área calma e profunda atrás do texto: `radial-gradient(ellipse 70% 45% at 35% 62%, #1b1030 0%, #2e1745 40%, #8a3f6e 75%, #f0a46f 100%)`

O bloco de texto fica na elipse de ameixa escura embaixo à esquerda; o pêssego e o rosa continuam vivos em direção às bordas.

```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%
  );
}
```

Mude a posição da elipse para onde estiver o seu título. [CSS de sobreposição em gradiente](https://gradiently.design/pt-br/guide/css-gradient-overlay) mostra o mesmo truque sobre uma foto.

## Quando diminuir a reação

Nem todo design quer legibilidade máxima. Um papel de parede de celular não tem palavra nenhuma, então Desativado é o certo. Letras de exibição enormes, uma única palavra num pôster, podem se sustentar sozinhas e muitas vezes ficam melhores com Invisível. Tratamentos de letra como Contorno ou Extrusão, vistos em [efeitos de lettering](https://gradiently.design/pt-br/guide/lettering-treatments), já trazem o próprio contraste. Guarde os níveis fortes para os trabalhos que precisam deles: letras miúdas, detalhes longos e tudo que é lido com pressa.

## FAQ

### Como um Mark do Gradiently se adapta ao texto?

Ele leva a área mais calma e de melhor contraste para trás das suas palavras, escurece ou clareia as cores perto das letras e relaxa o detalhe agitado, tudo sem caixas, sombras nem desfoque.

### Posso impedir o fundo de reagir ao meu texto?

Pode. Defina a reação como Desativado e o material ignora suas palavras, o que serve para papéis de parede e designs sem texto.

### Qual nível de reação devo usar?

Sutil serve para a maioria dos posts e stories. Use Claro ou Forte para texto pequeno, texto longo, cardápios e tudo que é lido de longe.

### A reação funciona quando redimensiono um design?

Funciona. Um Mark é desenhado de novo para cada tamanho, então ele abre espaço outra vez onde as palavras caírem no novo formato.