# Text shadow em CSS: sintaxe, exemplos e opções melhores

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

text-shadow é uma propriedade pequena com fama de salvar títulos ilegíveis. Ela é melhor em decoração do que em resgate. Aqui está a sintaxe, alguns estilos que valem a cópia e o que usar quando o problema de verdade é a legibilidade.

## The short version

- A propriedade text-shadow do CSS recebe um deslocamento horizontal, um deslocamento vertical, um raio de desfoque opcional e uma cor.
- Várias sombras podem ser empilhadas no mesmo texto separando-as por vírgulas, e a primeira da lista é desenhada por cima.
- Ao contrário de box-shadow, text-shadow não tem valor de spread nem a palavra-chave inset.
- Sombras deslocadas e secas, sem desfoque, são o estilo decorativo mais útil, de títulos retrô a sombras longas.
- Uma sombra escura e suave é uma correção fraca para texto sobre uma imagem agitada; um scrim, uma imagem mais escura ou um fundo mais calmo resolvem de verdade.

Um **text shadow em CSS** se escreve `text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4)`: um deslocamento horizontal, um deslocamento vertical, um raio de desfoque opcional e uma cor. Separe várias sombras por vírgulas para empilhá-las. É excelente para efeitos decorativos, como títulos com deslocamento nítido, sombras longas e contornos falsos. É uma ferramenta ruim para deixar texto legível sobre uma foto agitada, e as melhores opções para isso estão mais abaixo.

## Sintaxe do text-shadow

```css
/* offset-x | offset-y | blur-radius | color */
h1 { text-shadow: 2px 3px 6px rgb(0 0 0 / 0.35); }

/* No blur: a hard copy of the letters */
h1 { text-shadow: 3px 3px 0 #f97316; }

/* Colour first is also valid */
h1 { text-shadow: #f97316 3px 3px; }

/* Several shadows: the first is drawn on top */
h1 { text-shadow: 2px 2px 0 #fde68a, 4px 4px 0 #f97316; }

/* Remove an inherited shadow */
h1 { text-shadow: none; }
```

A gramática completa em cinco linhas. Os comprimentos podem ser negativos para jogar a sombra para cima ou para a esquerda.

| Parte | Obrigatória | O que faz |
| --- | --- | --- |
| Deslocamento horizontal | Sim | Positivo move a sombra para a direita, negativo para a esquerda |
| Deslocamento vertical | Sim | Positivo move para baixo, negativo para cima |
| Raio de desfoque | Não | O padrão é 0, uma borda seca. Não pode ser negativo |
| Cor | Não | O padrão é a cor do texto, `currentcolor` |

Aqui não existe spread nem `inset`. Esses pertencem ao [box-shadow](https://gradiently.design/pt-br/guide/css-box-shadow), que faz a sombra da caixa do elemento, não das letras.

A sombra é pintada atrás do texto e assume a forma de cada glifo, incluindo sublinhados e decorações. Ela não altera o layout: um deslocamento grande pode transbordar do elemento e se sobrepor aos vizinhos sem empurrá-los, então deixe espaço com padding se a sombra for grande.

## Exemplos de text shadow que valem a cópia

Os estilos que se sustentam são os de borda seca. Uma sombra sem desfoque parece uma escolha gráfica deliberada; um desfoque cinza suave sob o texto corrido tende a parecer um erro.

```css
/* 1. Subtle lift for large display type on a light page */
.lift { text-shadow: 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 3px rgb(15 23 42 / 0.18); }

/* 2. Retro offset in a second colour */
.retro { color: #1e1b4b; text-shadow: 4px 4px 0 #f472b6; }

/* 3. Double offset, poster style */
.double { color: #fff7ed; text-shadow: 3px 3px 0 #f97316, 6px 6px 0 #7c2d12; }

/* 4. Long shadow: many 1px steps */
.long {
  color: #fef3c7;
  text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309, 3px 3px 0 #b45309,
    4px 4px 0 #b45309, 5px 5px 0 #b45309, 6px 6px 0 #b45309,
    7px 7px 0 #b45309, 8px 8px 0 #b45309;
}

/* 5. Pressed in: a light edge below dark text on a mid tone */
.pressed { color: #334155; text-shadow: 0 1px 0 rgb(255 255 255 / 0.45); }
```

Cinco estilos que funcionam. A sombra longa é só a mesma sombra seca repetida, um pixel mais longe a cada vez.

Deslocamentos retrô e sombras longas aparecem visualmente em [efeitos de texto retrô](https://gradiently.design/pt-br/guide/retro-text-effect) e [efeitos de texto 3D](https://gradiently.design/pt-br/guide/3d-text-effect). Para um contorno limpo, prefira `-webkit-text-stroke` com `paint-order: stroke fill` ao velho truque de quatro sombras, uma em cada canto, que deixa falhas nas curvas; [texto com contorno](https://gradiently.design/pt-br/guide/outline-text) mostra os dois.

- Letras índigo: #1e1b4b
- Deslocamento rosa: #f472b6
- Letras creme: #fff7ed
- Primeiro degrau laranja: #f97316
- Segundo degrau ferrugem: #7c2d12

As cores por trás dos exemplos retrô e de deslocamento duplo. Sombras deslocadas funcionam melhor quando a cor da sombra é claramente diferente das letras, e não uma cópia mais escura delas.

## Por que uma sombra suave corrige mal a legibilidade

O uso mais comum de `text-shadow` é um desfoque escuro atrás de texto branco sobre uma foto, na esperança de separar os dois. Ajuda um pouco nas bordas de cada letra e não faz nada no espaço dentro delas, onde a foto continua aparecendo com toda a força. Aumente o desfoque e a opacidade até funcionar e você ganha uma mancha em volta de cada palavra. Brilhos em volta do texto, claros ou escuros, parecem datados e ainda falham nas partes mais claras da imagem.

Os verificadores de contraste também ignoram sombras. Eles medem a cor do texto contra a cor do fundo, então um título que só passa graças à sombra vai ser apontado numa auditoria, e com razão. Os limites estão em [contraste de cor e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

### Sombra como muleta

- Halo preto desfocado atrás de texto branco
- Falha onde a imagem é mais clara
- Ferramentas de contraste continuam acusando falha
- Bordas turvas em texto pequeno

### Corrija o fundo

- Um scrim em gradiente sob as palavras
- Escurecer ou dessaturar a imagem
- Levar o texto para a área mais calma
- Escolher um fundo feito para receber palavras

## Opções melhores para texto sobre imagens e gradientes

Um scrim é um gradiente que escurece só a parte da imagem atrás do texto e some no resto. Ele mantém a foto luminosa onde importa e dá a cada letra o mesmo fundo calmo. [Overlays de gradiente em CSS](https://gradiently.design/pt-br/guide/css-gradient-overlay) explica as camadas em detalhe.

Scrim inferior para legendas: `linear-gradient(to top, rgb(2 6 23 / 0.78) 0%, rgb(2 6 23 / 0.45) 35%, rgb(2 6 23 / 0) 70%)`

Escuro na base, limpo a dois terços da altura. Coloque-o sobre uma foto e posicione a legenda no terço inferior.

```css
.card {
  background-image:
    linear-gradient(to top, rgb(2 6 23 / 0.78), rgb(2 6 23 / 0) 70%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}
```

O scrim como camada de fundo superior, a foto embaixo. Nenhuma sombra necessária no texto.

Outras opções confiáveis: passar a imagem por `filter: brightness(0.75)` numa camada própria, recortar para que as palavras caiam sobre céu ou parede e não sobre detalhes, ou colocar o texto numa faixa sólida. [Texto sobre imagens](https://gradiently.design/pt-br/guide/text-over-image) mostra cada uma com exemplos.

Um post em retrato com um título creme cruzando uma área clara do gradiente e perdendo contraste

Palavras claras sobre a parte mais clara do fundo. Uma sombra só borraria o problema.

O mesmo post em retrato com o gradiente se aprofundando atrás do título para que ele se leia com clareza

Em vez disso, o fundo se aprofunda atrás da linha, e as palavras se leem sem nenhum efeito sobre elas.

É exatamente o trabalho que os Marks do Gradiently fazem sozinhos: a região mais calma se move para trás das suas palavras e a Tinta automática escolhe letra clara ou escura linha por linha, sem sombra, caixa ou desfoque. Quando você quer sombra como decoração e não como conserto, tratamentos de letras como Extrusão, Duplo e Rastro dão estilos deslocados sem escrever uma única sombra.

## Text shadow em texto com gradiente

Texto com gradiente é feito com `background-clip: text` e uma cor de texto transparente. Acrescente um `text-shadow` e a sombra aparece direto através das letras transparentes, turvando o gradiente por dentro. A solução é fazer a sombra do elemento: `filter: drop-shadow(3px 3px 0 #1e1b4b)` segue a forma pintada das letras e fica atrás delas. A técnica em si está em [texto com gradiente em CSS](https://gradiently.design/pt-br/guide/css-gradient-text).

> **Uma sombra por drop-shadow()** `drop-shadow()` aceita uma sombra por função, mas você pode encadear várias: `filter: drop-shadow(2px 2px 0 #f97316) drop-shadow(2px 2px 0 #7c2d12)`. Cada uma faz a sombra do resultado da anterior.

## Desempenho e animação

Sombras secas são baratas. Raios de desfoque grandes em trechos longos de texto custam mais para pintar, e animar `text-shadow` repinta o texto a cada quadro. Se quiser animar um título, mova-o com `transform` e mantenha a sombra fixa.

## FAQ

### Qual é a sintaxe do text-shadow em CSS?

`text-shadow: offset-x offset-y blur-radius color`, por exemplo `2px 2px 4px #000`. Só os dois deslocamentos são obrigatórios.

### Posso usar mais de uma sombra no texto?

Sim. Separe as sombras por vírgulas. A primeira da lista é pintada por cima das outras.

### O text-shadow tem valor de spread?

Não. Spread e `inset` só existem no `box-shadow`. Para engrossar uma sombra de texto, empilhe várias sombras com pequenos deslocamentos.

### O text-shadow melhora a acessibilidade?

Não de forma confiável. As verificações de contraste ignoram sombras, então o texto precisa atingir o contraste exigido contra o fundo sem ela.

### Como deixo texto branco legível sobre uma foto sem text-shadow?

Coloque um scrim escuro em gradiente atrás da área do texto, escureça a imagem ou posicione as palavras sobre uma parte calma da foto.