# Sombra no texto: quando ajuda e alternativas melhores

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

A sombra projetada é a solução mais comum para texto ilegível e uma das formas mais rápidas de fazer um design parecer datado. Veja quando a sombra é a escolha certa e o que usar no resto do tempo.

## The short version

- A sombra no texto funciona melhor como estilo deliberado, como uma sombra dura deslocada e sem desfoque, do que como conserto para um contraste ruim.
- Brilhos suaves e halos desfocados atrás das letras borram as bordas e tendem a deixar o design com cara barata e datada.
- Uma sombra fina e justa é uma escolha razoável para legendas sobre vídeo em movimento, onde o fundo não pode ser controlado.
- Para deixar o texto legível, posição, um degradê de proteção, um fundo tingido e um peso maior costumam vencer qualquer sombra.
- Em CSS, text-shadow aceita um deslocamento horizontal, um vertical, um raio de desfoque opcional e uma cor, e aceita várias sombras separadas por vírgulas.

A **sombra no texto** ajuda em duas situações: como estilo deliberado, em geral uma sombra dura deslocada alguns pixels e sem desfoque, e como borda de segurança fina em legendas sobre vídeo em movimento. Como resgate para palavras que não se leem sobre uma foto ou gradiente, costuma prejudicar: sombras suaves e brilhos borram justamente as bordas que o olho usa para reconhecer as letras e datam o design na hora. Para legibilidade, leve as palavras para uma área mais calma, acrescente um degradê de proteção, tinja o fundo ou escolha um peso maior.

## Tipos de efeito de sombra no texto

| Tipo | Como parece | Veredito |
| --- | --- | --- |
| Dura deslocada | Uma cópia sólida das letras deslocada para baixo e para a direita, sem desfoque | Um estilo forte: retrô, divertido, de pôster |
| Sombra longa | Muitas cópias deslocadas formando um bloco diagonal | Um estilo, próximo da extrusão 3D; use em poucas palavras |
| Sombra sutil | Deslocamento pequeno, desfoque pequeno, baixa opacidade | Quase invisível na maioria das telas; muitas vezes inútil |
| Borda de legenda justa | Pouco ou nenhum deslocamento, desfoque curto, escura | Boa para legendas sobre vídeo imprevisível |
| Brilho suave ou halo | Uma nuvem larga e borrada de cor em volta de cada letra | Evite: borra as letras e parece barato |

Só as duas primeiras são escolhas de design. As duas do meio são utilitários. A última é um hábito que vale quebrar.

## Quando a sombra no texto ajuda

### Como estilo duro e deslocado

Uma sombra sem desfoque, deslocada alguns por cento da altura da letra e numa cor de contraste da paleta, é um estilo tipográfico com longa história em pôsteres, embalagens e placas. Transmite confiança e um toque de nostalgia. Trate como qualquer efeito: um por design, poucas palavras grandes, uma fonte pesada. [Efeitos de texto](https://gradiently.design/pt-br/guide/text-effects) compara com os outros tratamentos. [Efeitos de texto retrô](https://gradiently.design/pt-br/guide/retro-text-effect) mostra seus primos próximos, o duplo e o rastro.

### Atrás de legendas em vídeo

Legendas ficam sobre imagens que mudam a cada quadro, então você não pode escolher uma área calma. Uma sombra escura e justa ou um contorno fino mantém legíveis as legendas brancas quando uma janela clara passa atrás delas. Mantenha-a rente às letras: desfoque curto e pouco ou nenhum deslocamento. [Design de legendas em vídeo](https://gradiently.design/pt-br/guide/video-captions-design) trata de tamanho e posição.

## Quando a sombra no texto atrapalha

O problema de usar uma sombra para consertar o contraste é que ela trata o sintoma. O fundo continua agitado; você só acrescentou uma mancha em volta das letras. Brilhos suaves são os piores, porque espalham uma nuvem borrada além de cada letra e amolecem a borda que define sua forma. Em posts sociais também comprimem mal e viram faixas manchadas.

### Sombra como muleta

- Brilho preto suave em texto branco sobre uma foto
- Halo colorido em volta de um título
- Sombra em texto corrido pequeno
- Várias sombras diferentes num mesmo design
- Sombra, contorno e brilho numa só palavra

### Escolha melhor

- Leve as palavras para a área mais calma
- Um degradê de proteção numa borda da imagem
- Tipo maior e mais pesado na linha pequena
- Um estilo consistente em todo o conjunto
- Um tratamento, escolhido de propósito

## Alternativas melhores à sombra no texto

1. **Mude as palavras de lugar** Ache a área mais calma e uniforme do fundo e ponha o texto lá. Isso resolve a maioria dos problemas antes de começarem.
2. **Acrescente um degradê de proteção** Um fade suave do escuro para o transparente ao longo de uma borda dá contraste sem uma forma visível. [Texto legível sobre fotos](https://gradiently.design/pt-br/guide/readable-text-on-photos) traz códigos de degradê.
3. **Acalme o fundo** Tinja uma foto em uma ou duas cores, reduza as altas luzes ou escolha um gradiente com uma região mais quieta.
4. **Reforce o tipo** Suba um peso e um tamanho. Uma sem serifa em negrito num tamanho generoso dispensa ajuda na maioria dos fundos.
5. **Mude a tinta** Às vezes texto escuro sobre uma área clara vence texto branco com sombra. Escolha a tinta por linha, não para o design inteiro.

Um post vertical dizendo Aberto até tarde, em que o fundo corre irregular atrás das letras

Palavras sobre um trecho agitado do fundo: é o momento em que se recorre ao brilho.

O mesmo post com letras limpas e sem sombra, sobre uma área calma do gradiente

As mesmas palavras com o fundo acalmado atrás delas. Sem sombra, e as letras continuam nítidas.

Em gradientes especificamente, o fundo costuma ficar mais claro ou mais escuro ao longo do quadro, então uma única cor de tinta não serve para todas as linhas. [Texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) mostra como planejar isso, e [tipo sobre fundos agitados](https://gradiently.design/pt-br/guide/type-on-busy-backgrounds) trata de padrões e texturas.

## Sombra no texto em CSS

A propriedade CSS `text-shadow` aceita um deslocamento horizontal, um vertical, um raio de desfoque opcional e uma cor. Separe várias sombras com vírgulas; a primeira listada fica por cima. Use unidades `em` para a sombra acompanhar o tamanho da fonte. A referência completa está na [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow).

```css
/* Hard offset style: no blur, colour from the palette */
.headline-offset {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #9a3412;
}

/* Tight caption edge for text over video */
.caption {
  color: #ffffff;
  text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}

/* Preferred fix for readability: a scrim, not a shadow */
.hero {
  background:
    linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
    url("/images/hero.jpg") center / cover;
}
```

Duas sombras que valem a pena e o degradê de proteção que substitui o resto.

Verificadores automáticos de contraste comparam a cor do texto com a cor do fundo e ignoram a sombra. Se uma ferramenta apontar contraste baixo no seu texto, a sombra pode melhorar a aparência na sua tela, mas não muda a medição. Corrija o fundo ou a tinta. [Sombra de texto em CSS](https://gradiently.design/pt-br/guide/css-text-shadow) tem mais receitas para a web.

## Como o Gradiently trata a legibilidade

O Gradiently nasceu da ideia de que as palavras não deveriam precisar de resgate. Um Mark sabe onde estão as palavras: sua região mais calma e de melhor contraste vai para trás do texto, as cores perto das letras escurecem ou clareiam e o detalhe agitado relaxa. A Tinta automática então escolhe tipo claro ou escuro para cada linha, a partir da paleta do próprio Mark. Não há caixas, sombras nem desfoque envolvidos, e você escolhe a intensidade da resposta do Mark. Se quiser profundidade como estilo, o tratamento de lettering Extrusão dá letras profundas nas cores do Mark e o Duplo desenha letras abertas duas vezes, ambos nítidos e sem desfoque.

## FAQ

### Devo usar sombra no texto para deixá-lo legível?

Em geral não. Posição, um degradê de proteção, um fundo mais calmo ou um peso maior deixam o texto legível sem borrar as letras.

### O que é uma sombra dura no texto?

Uma cópia das letras deslocada para baixo e para um lado, sem desfoque, em geral numa cor de contraste. É um estilo deliberado, visto em pôsteres e embalagens.

### Como adiciono sombra no texto em CSS?

Use `text-shadow: 0.06em 0.06em 0 #9a3412;` em que os valores são deslocamento horizontal, deslocamento vertical, raio de desfoque e cor.

### A sombra no texto melhora o contraste para acessibilidade?

Verificadores automáticos comparam a cor do texto com a do fundo e ignoram a sombra, então uma sombra não conserta uma razão reprovada. Corrija o fundo ou a tinta.

### Por que efeitos de texto com brilho parecem baratos?

Um brilho espalha uma nuvem borrada em volta de cada letra, amolecendo as bordas e muitas vezes gerando faixas quando a imagem é comprimida.