# Sombra de texto: quando ajuda e melhores alternativas

[Canonical HTML page](https://gradiently.design/pt-pt/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. Eis quando a sombra é a escolha certa e o que usar no resto do tempo.

## The short version

- Uma sombra de texto funciona melhor como estilo deliberado, como uma sombra dura deslocada e sem desfocagem, do que como remendo para um contraste fraco.
- Brilhos suaves e halos desfocados atrás das letras esborratam os seus contornos e tendem a fazer o design parecer barato e datado.
- Uma sombra fina e curta é uma escolha razoável para legendas sobre vídeo em movimento, onde o fundo não se pode controlar.
- Para tornar o texto legível, a posição, um véu em gradiente, um fundo com tom e um peso mais forte costumam ganhar a qualquer sombra.
- Em CSS, o text-shadow recebe um desvio horizontal, um desvio vertical, um raio de desfocagem opcional e uma cor, e aceita várias sombras separadas por vírgulas.

Uma **sombra de texto** ajuda em duas situações: como estilo deliberado, geralmente uma sombra dura deslocada alguns píxeis e sem desfocagem, e como fino contorno de segurança em legendas sobre vídeo em movimento. Como salvação para palavras que não se leem numa fotografia ou num gradiente, costuma prejudicar: sombras suaves e brilhos esborratam os contornos que o olho usa para reconhecer letras e datam um design de imediato. Para ganhar legibilidade, muda as palavras para uma zona mais calma, junta um véu em gradiente, dá um tom ao fundo ou escolhe um peso mais forte.

## Tipos de efeito de sombra no texto

| Tipo | Como se vê | Veredicto |
| --- | --- | --- |
| Dura e deslocada | Uma cópia sólida das letras deslocada para baixo e para a direita, sem desfocagem | Um estilo forte: retro, divertido, de cartaz |
| Sombra longa | Várias cópias deslocadas que formam um bloco diagonal | Um estilo próximo da extrusão 3D; usa em poucas palavras |
| Sombra subtil | Desvio pequeno, desfocagem pequena, opacidade baixa | Quase invisível na maioria dos ecrãs; muitas vezes inútil |
| Contorno de legenda | Pouco ou nenhum desvio, desfocagem curta, escura | Boa para legendas sobre vídeo imprevisível |
| Brilho suave ou halo | Uma nuvem larga e desfocada de cor à volta de cada letra | Evitar: esborrata 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 a perder.

## Quando uma sombra de texto ajuda

### Como estilo duro e deslocado

Uma sombra sem desfocagem, deslocada uns poucos por cento da altura da letra e numa cor contrastante da paleta, é um estilo tipográfico com longa história em cartazes, embalagens e sinalética. Passa confiança e um toque de nostalgia. Trata-a como qualquer efeito: um por design, poucas palavras grandes, um tipo de letra pesado. [Efeitos de texto](https://gradiently.design/pt-pt/guide/text-effects) compara-a com os outros tratamentos. [Efeito de texto retro](https://gradiently.design/pt-pt/guide/retro-text-effect) mostra os seus primos próximos, o duplo e o rasto.

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

Legendas e subtítulos ficam sobre imagens que mudam a cada fotograma, por isso não podes escolher uma zona calma. Uma sombra curta e escura ou um contorno fino mantém as legendas brancas legíveis quando uma janela brilhante passa por trás. Mantém-na junto às letras: desfocagem curta e pouco ou nenhum desvio. [Design de legendas de vídeo](https://gradiently.design/pt-pt/guide/video-captions-design) trata do tamanho e da posição.

## Quando uma sombra de texto prejudica

O problema de usar uma sombra para corrigir o contraste é que trata o sintoma. O fundo continua agitado; apenas juntaste uma mancha à volta das letras. Os brilhos suaves são o pior caso, porque espalham uma nuvem desfocada para lá de cada letra e amaciam o contorno que define a sua forma. Nas publicações sociais comprimem-se mal e transformam-se em faixas manchadas.

### A sombra como muleta

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

### Melhor escolha

- Mudar as palavras para a zona mais calma
- Um véu em gradiente num dos bordos da imagem
- Letra maior e mais pesada para a linha pequena
- Um estilo coerente em toda a série
- Um só tratamento, escolhido de propósito

## Melhores alternativas à sombra de texto

1. **Muda as palavras** Encontra a zona mais calma e uniforme do fundo e põe lá o texto. Isto resolve a maioria dos problemas antes de surgirem.
2. **Junta um véu em gradiente** Um desvanecer suave de escuro para transparente ao longo de um bordo dá contraste sem uma forma visível. [Texto legível em fotografias](https://gradiently.design/pt-pt/guide/readable-text-on-photos) tem códigos de véus.
3. **Acalma o fundo** Dá a uma fotografia um tom de uma ou duas cores, baixa-lhe os realces ou escolhe um gradiente com uma zona mais sossegada.
4. **Reforça a letra** Sobe um peso e um tamanho. Uma sem serifa forte em tamanho generoso não precisa de ajuda na maioria dos fundos.
5. **Muda a tinta** Por vezes, texto escuro numa zona clara vence texto branco com sombra. Escolhe a tinta por linha e não para o design inteiro.

Uma publicação vertical com o texto Aberto até tarde, onde o fundo corre de forma irregular atrás das letras

Palavras sobre uma zona agitada do fundo: é o momento em que muita gente recorre a um brilho.

A mesma publicação com letras limpas e sem sombra, sobre uma zona calma do gradiente

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

Nos gradientes em particular, o fundo fica muitas vezes mais claro ou mais escuro ao longo do quadro, por isso uma só cor de tinta não serve todas as linhas. [Texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) mostra como planear isso, e [letra em fundos agitados](https://gradiently.design/pt-pt/guide/type-on-busy-backgrounds) trata de padrões e texturas.

## Sombra de texto em CSS

A propriedade CSS `text-shadow` recebe um desvio horizontal, um desvio vertical, um raio de desfocagem opcional e uma cor. Separa várias sombras com vírgulas; a primeira da lista fica por cima. Usa unidades `em` para a sombra acompanhar o tamanho da letra. 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 véu que substitui as outras.

Os verificadores automáticos de contraste comparam a cor do texto com a cor do fundo e ignoram a sombra. Se uma ferramenta marcar o teu texto com contraste baixo, uma sombra pode melhorar o aspeto no teu ecrã, mas não altera a medição. Corrige antes o fundo ou a tinta. [CSS de sombra de texto](https://gradiently.design/pt-pt/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 deviam precisar de ser salvas. Um Mark sabe onde estão as palavras: a sua zona mais calma e de melhor contraste desloca-se para trás do texto, as cores junto às letras escurecem ou clareiam e o detalhe agitado suaviza-se. A Tinta automática escolhe depois letra clara ou escura para cada linha, a partir da paleta do próprio Mark. Não há caixas, sombras nem desfocagem, e escolhes a intensidade da resposta do Mark. Se queres 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 desfocagem.

## FAQ

### Devo usar uma sombra de texto para tornar o texto legível?

Normalmente não. A posição, um véu em gradiente, um fundo mais calmo ou um peso mais forte tornam o texto legível sem esborratar as letras.

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

Uma cópia das letras deslocada para baixo e para um lado, sem desfocagem, geralmente numa cor contrastante. É um estilo deliberado que se vê em cartazes e embalagens.

### Como adiciono uma sombra de texto em CSS?

Usa `text-shadow: 0.06em 0.06em 0 #9a3412;`, em que os valores são o desvio horizontal, o desvio vertical, o raio de desfocagem e a cor.

### Uma sombra de texto melhora o contraste para a acessibilidade?

Os verificadores automáticos comparam a cor do texto com o fundo e ignoram a sombra, por isso uma sombra não corrige uma razão que falha. Corrige o fundo ou a tinta.

### Porque é que os efeitos de brilho no texto parecem baratos?

Um brilho espalha uma nuvem desfocada à volta de cada letra, amaciando os contornos e provocando muitas vezes faixas quando a imagem é comprimida.