# Texto com gradiente em CSS, bem feito

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

Três linhas de CSS colocam um gradiente dentro das suas letras. Deixá-lo legível, robusto e de bom gosto leva mais algumas, e saber quando deixar o texto liso.

## The short version

- O texto com gradiente em CSS funciona pintando um gradiente como fundo do elemento, recortando-o no formato das letras com background-clip: text e deixando a cor do texto transparente.
- Defina sempre primeiro uma cor sólida de texto e aplique a cor transparente só dentro de uma verificação @supports, para que as palavras nunca sumam.
- Cada parte do gradiente precisa de contraste suficiente com o fundo, então confira as paradas mais clara e mais escura, não só uma.
- O texto com gradiente combina com linhas curtas de destaque em tamanhos grandes e funciona mal em texto corrido, links e rótulos pequenos.
- Acrescentar box-decoration-break: clone dá a cada linha de um elemento inline quebrado o seu próprio gradiente completo.

O **texto com gradiente** em CSS é feito pintando um gradiente como fundo do elemento de texto, recortando esse fundo no formato das letras com `background-clip: text` e deixando o próprio texto transparente para o gradiente aparecer. São três declarações, funciona em todos os navegadores atuais e continua sendo texto de verdade, selecionável e pesquisável, e não uma imagem.

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

A técnica básica. A linha com prefixo mantém contentes as versões mais antigas do Safari e do Chromium.

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

O gradiente dentro dessas letras. As duas pontas são escuras o bastante para se ler no branco.

O resto deste guia trata do que a versão de três linhas faz de errado: alternativas ausentes, contraste, texto em várias linhas, descendentes cortadas e a questão de design de quando o texto com gradiente ajuda. Para o visual de letras com gradiente em redes sociais e trabalhos de marca, e não na web, veja [efeitos de texto](https://gradiently.design/pt-br/guide/text-effects).

## Uma receita robusta de texto com gradiente, com alternativas

Se um navegador aplica o `color: transparent`, mas não o recorte, o texto some. Proteja-se: dê ao elemento uma cor sólida tirada do gradiente e só troque para a versão transparente quando o navegador confirmar o suporte. Acrescente uma redefinição para o modo de cores forçadas, em que o sistema substitui suas cores e o texto precisa continuar visível.

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

Cor sólida primeiro, gradiente só onde há suporte e uma cor do sistema quando o usuário força as suas.

A [página do MDN sobre background-clip](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip) documenta o valor `text` e seu suporte atual.

## Contraste: confira as duas pontas do gradiente

Um verificador de contraste recebe uma cor de texto, mas o texto com gradiente tem várias. As palavras são tão legíveis quanto sua parte mais fraca, então confira a parada mais clara e a mais escura contra o fundo, e olhe o meio também, porque uma mistura em sRGB pode ficar mais clara ou mais sem graça que qualquer das pontas. Para texto grande de destaque, o WCAG pede pelo menos 3:1; para texto normal, 4,5:1. [Contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica as razões.

- No branco: violeta a rosa: `linear-gradient(90deg, #6d28d9, #be185d)`
- No branco: oceano a turquesa: `linear-gradient(90deg, #0369a1, #0f766e)`
- No branco: brasa a rosa: `linear-gradient(90deg, #c2410c, #be185d)`
- No quase preto: lilás a rosa: `linear-gradient(90deg, #a78bfa, #f472b6)`
- No quase preto: ciano a limão: `linear-gradient(90deg, #67e8f9, #fde047)`

Gradientes de texto cujas paradas passam todas de 5:1 no fundo indicado. No branco, cada parada mede mais de 5:1; em #0b0b12, mais de 7:1.

> **A falha comum** Um gradiente que esmaece para uma cor clara, como violeta a rosa-claro sobre branco, deixa o fim de cada palavra quase invisível. Mantenha as duas pontas com uma luminosidade parecida e segura e deixe o matiz fazer a mudança.

## Corrigindo texto com gradiente em várias linhas e letras cortadas

Em um elemento inline que quebra, o navegador estende um só fundo por todas as linhas como se fossem uma única tira, então a primeira linha recebe o começo do gradiente e a última recebe o fim. Em geral você quer que cada linha carregue o gradiente completo. O `box-decoration-break: clone` faz isso. Em elementos de bloco, como um título, o gradiente já abrange a caixa inteira, então um gradiente longo em um título largo pode mostrar só o meio nas linhas curtas.

```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 linha recebe o próprio gradiente completo, e as caudas do g, j, p e y ficam dentro da área pintada.

As descendentes cortadas são a outra surpresa. O fundo só pinta a caixa do elemento, então, com um `line-height` muito justo, as partes das letras que ficam abaixo dela ficam transparentes e somem. Uma altura de linha de cerca de 1,1 ou um pouco de padding embaixo resolve. Fontes de destaque em itálico podem perder a ponta da última letra à direita pelo mesmo motivo; um toque de padding inline ajuda.

## Quando o texto com gradiente funciona e quando não

### Evite

- Texto corrido, em que a mudança de cor atrapalha a leitura
- Links e botões, em que a cor indica estado
- Rótulos pequenos, abaixo de cerca de 24px, em que o gradiente é invisível de qualquer jeito
- Gradientes arco-íris com cinco ou mais matizes
- Texto com gradiente sobre fundo com gradiente

### Use para

- Uma palavra ou frase curta em um título grande
- O nome de um produto ou marca em um hero
- Números grandes em um bloco de estatísticas
- Dois ou três matizes relacionados com luminosidade parecida
- Fundos simples e calmos que deixam as letras liderarem

Uma boa regra: o texto com gradiente é um destaque, como o itálico. Uma palavra realçada em um título atrai o olhar; um parágrafo inteiro dele cansa. Pesos fortes ajudam, porque traços finos não mostram cor suficiente para se lerem como gradiente. Se o resto da página já usa fundos em gradiente, tipografia lisa costuma ser a escolha mais forte; [texto sobre fundos em gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) trata desse caso.

## Animando texto com gradiente

Para fazer a cor fluir pelas letras, deixe o fundo maior que o texto e mova-o. Dê a ele 200% de largura e anime o `background-position` de ida e volta com `alternate`, para nunca haver um salto quando o ciclo recomeça. Respeite as configurações de [movimento reduzido](https://gradiently.design/pt-br/guide/reduced-motion) e mantenha lento: um brilho a cada poucos segundos parece acabamento, um ciclo rápido parece um aviso.

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

A cor derivando de um lado a outro pelas palavras. Combine com o recorte e a alternativa da receita acima.

Os mesmos truques de fundo alimentam os [gradientes animados em CSS](https://gradiently.design/pt-br/guide/css-animated-gradient) de modo mais amplo, e contornos em vez de preenchimentos com gradiente estão em [bordas com gradiente em CSS](https://gradiently.design/pt-br/guide/css-gradient-border).

## FAQ

### Como faço texto com gradiente em CSS?

Defina um gradiente como `background-image`, acrescente `-webkit-background-clip: text` e `background-clip: text` e defina `color: transparent`. Coloque uma cor sólida fora de uma verificação `@supports` como alternativa.

### Por que meu texto com gradiente está invisível?

O texto está transparente, mas o fundo não está sendo recortado, em geral porque a declaração de recorte está ausente, escrita errada ou sem suporte. Aplique `color: transparent` só dentro de `@supports (background-clip: text)`.

### O texto com gradiente é acessível?

Pode ser, se cada parte do gradiente tiver contraste suficiente com o fundo e o texto continuar sendo texto de verdade. Confira as paradas mais clara e mais escura e redefina as cores no modo de cores forçadas.

### Por que a parte de baixo das minhas letras está cortada?

O fundo recortado só cobre a caixa do elemento, então uma altura de linha justa deixa as descendentes fora dela. Aumente a altura da linha para cerca de 1,1 ou acrescente um pouco de padding embaixo.

### Posso usar texto com gradiente em e-mails?

O suporte a `background-clip: text` é irregular entre os clientes de e-mail, então use uma cor sólida ou uma imagem com texto alternativo nesse caso. Veja [gradientes em e-mail](https://gradiently.design/pt-br/guide/gradients-in-email).