# CSS text-shadow: sintaxe, exemplos e melhores alternativas

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

O text-shadow é uma propriedade pequena com grande fama de salvar títulos ilegíveis. É melhor a decorar do que a salvar. Aqui ficam a sintaxe, alguns estilos que vale a pena copiar e o que usar quando o problema real é a legibilidade.

## The short version

- A propriedade CSS text-shadow recebe um deslocamento horizontal, um deslocamento vertical, um raio de desfocagem opcional e uma cor.
- Podes empilhar várias sombras num mesmo texto separando-as por vírgulas, e a primeira da lista é desenhada por cima.
- Ao contrário do box-shadow, o text-shadow não tem valor de spread nem a palavra-chave inset.
- As sombras com deslocamento duro e sem desfocagem são o estilo decorativo mais útil, de títulos retro a sombras longas.
- Uma sombra escura e suave é um remédio fraco para texto sobre uma imagem confusa; um scrim, uma imagem mais escura ou um fundo mais calmo resolvem o problema como deve ser.

Um **CSS text-shadow** escreve-se `text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4)`: um deslocamento horizontal, um deslocamento vertical, um raio de desfocagem opcional e uma cor. Separa várias sombras com vírgulas para as empilhar. É excelente para efeitos decorativos como títulos com deslocamento nítido, sombras longas e falsos contornos. É uma ferramenta fraca para tornar texto legível sobre uma fotografia confusa, 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 lançar 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 move-a para a esquerda |
| Deslocamento vertical | Sim | Positivo move-a para baixo, negativo move-a para cima |
| Raio de desfocagem | Não | Por defeito é 0, uma aresta dura. Não pode ser negativo |
| Cor | Não | Por defeito é a cor do texto, `currentcolor` |

Aqui não há spread nem `inset`. Esses pertencem ao [box-shadow](https://gradiently.design/pt-pt/guide/css-box-shadow), que faz sombra à caixa do elemento e não às letras.

A sombra é pintada atrás do texto e toma a forma de cada glifo, incluindo sublinhados e decorações. Não altera o layout: um deslocamento grande pode sair do elemento e sobrepor-se aos vizinhos sem os empurrar, por isso deixa espaço com padding se a sombra for grande.

## Exemplos de text-shadow que vale a pena copiar

Os estilos que aguentam são os de aresta dura. Uma sombra sem desfocagem lê-se como uma escolha gráfica deliberada; uma desfocagem cinzenta suave sob texto corrido tende a ler-se como 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 dura repetida um píxel mais longe de cada vez.

Os deslocamentos retro e as sombras longas estão tratados visualmente em [efeitos de texto retro](https://gradiently.design/pt-pt/guide/retro-text-effect) e [efeitos de texto 3D](https://gradiently.design/pt-pt/guide/3d-text-effect). Para um contorno limpo, prefere `-webkit-text-stroke` com `paint-order: stroke fill` ao velho truque de quatro sombras em cada canto, que deixa falhas nas curvas; [texto com contorno](https://gradiently.design/pt-pt/guide/outline-text) mostra ambos.

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

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

## Porque é que uma sombra suave corrige mal a legibilidade

O uso comum do `text-shadow` é uma desfocagem escura atrás de texto branco sobre uma fotografia, na esperança de separar os dois. Ajuda um pouco nas arestas de cada letra e não faz nada pelo espaço lá dentro, onde a fotografia continua a ver-se com toda a força. Sobe a desfocagem e a opacidade até funcionar e ficas com uma mancha à volta de cada palavra. Os brilhos à volta do texto, claros ou escuros, parecem datados e continuam a falhar nas zonas mais claras da imagem.

As ferramentas de contraste também ignoram as sombras. Medem a cor do texto contra a cor do fundo, por isso um título que só passa graças à sombra será assinalado numa auditoria, e com razão. Os limiares estão em [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

### A sombra como muleta

- Halo preto desfocado atrás de texto branco
- Falha onde a imagem é mais clara
- As ferramentas de contraste continuam a dar falha
- Arestas sujas em texto pequeno

### Corrige o fundo

- Um scrim em gradiente sob as palavras
- Escurece ou dessatura a imagem
- Passa o texto para a zona mais calma
- Escolhe um fundo feito para levar palavras

## Melhores opções para texto sobre imagens e gradientes

Um scrim é um gradiente que escurece só a parte da imagem atrás do texto e se esbate até ao nada no resto. Mantém a fotografia luminosa onde interessa e dá a cada letra o mesmo chão calmo. [Sobreposições de gradiente em CSS](https://gradiently.design/pt-pt/guide/css-gradient-overlay) trata das camadas por completo.

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 aos dois terços de altura. Põe-no sobre uma fotografia e coloca o texto da 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, com a fotografia por baixo. O texto não precisa de sombra.

Outras opções fiáveis: passar a imagem por `filter: brightness(0.75)` numa camada própria, recortar para as palavras caírem em céu ou parede e não em detalhe, ou pôr o texto numa faixa sólida. [Texto sobre imagens](https://gradiently.design/pt-pt/guide/text-over-image) percorre cada uma com exemplos.

Uma publicação vertical com um título cor de creme a atravessar uma zona clara do gradiente e a perder contraste

Palavras claras sobre a zona mais clara do fundo. Uma sombra só desfocava o problema.

A mesma publicação vertical com o gradiente a aprofundar-se atrás do título para se ler com clareza

Em vez disso, o fundo aprofunda-se atrás da linha, e as palavras lêem-se sem qualquer efeito aplicado.

É exatamente o trabalho que os Marks do Gradiently fazem sozinhos: a zona mais calma move-se para trás das tuas palavras e o Tinta automática escolhe texto claro ou escuro linha a linha, sem sombra, caixa ou desfocagem. Quando queres a sombra como decoração e não como reparação, os tratamentos de lettering como Extrusão, Duplo e Rasto dão-te estilos com deslocamento sem escreveres uma única sombra.

## Text-shadow em texto com gradiente

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

> **Uma sombra por drop-shadow()** O `drop-shadow()` recebe uma sombra por função, mas podes encadear várias: `filter: drop-shadow(2px 2px 0 #f97316) drop-shadow(2px 2px 0 #7c2d12)`. Cada uma faz sombra ao resultado da anterior.

## Desempenho e animação

As sombras duras são baratas. Raios de desfocagem grandes em passagens longas de texto custam mais a pintar, e animar `text-shadow` repinta o texto a cada fotograma. Se queres animar um título, move-o com `transform` e mantém 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 acrescentar mais do que uma sombra de texto?

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

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

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

### O text-shadow melhora a acessibilidade?

Não de forma fiável. As verificações de contraste ignoram as sombras, por isso o texto tem de atingir o contraste exigido contra o fundo sem uma.

### Como torno texto branco legível numa fotografia sem text-shadow?

Põe um scrim de gradiente escuro atrás da zona do texto, escurece a imagem ou coloca as palavras sobre uma parte calma da fotografia.