Docs executáveis de CSS: Text-shadow

Q: Qual é a sintaxe do text-shadow?

text-shadow: offset-x offset-y blur-radius color;, por exemplo text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. Os dois deslocamentos são obrigatórios; o desfoque vale 0 por padrão e a cor é a do texto.

Q: Como colocar mais de uma sombra no texto?

Separe as sombras com vírgulas: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. A primeira sombra é desenhada por cima das seguintes.

Q: O text-shadow tem valor de spread como o box-shadow?

Não. O text-shadow não tem spread nem a palavra-chave inset. Para engrossar a sombra em volta das letras, empilhe várias sombras ou use -webkit-text-stroke para um contorno.

Text-shadow CSS: sombra no texto, brilho, contorno e 3D

text-shadow desenha uma ou mais sombras atrás do texto. Veja os quatro valores (deslocamento x, deslocamento y, desfoque, cor), como empilhar sombras para efeitos de brilho, contorno e 3D e como usar a sombra para manter o texto legível em fundos carregados.

Esta página tem editores executáveis - edite, execute e veja a saída na hora.

Por Kevin Spektor, Co-founder & CTO

Publicado em Sep 24, 2026

Como o text-shadow funciona

text-shadow pinta uma cópia do texto atrás dele, deslocada e desfocada. Você informa um deslocamento horizontal, um deslocamento vertical, um desfoque opcional e uma cor.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 36px; font-weight: 700; color: #111827; }
    p { margin: 12px 0; }
    .hard { text-shadow: 3px 3px 0 #f59e0b; }
    .soft { text-shadow: 2px 2px 6px rgb(0 0 0 / 35%); }
  </style>
</head>
<body>
  <p class="hard">Hard shadow</p>
  <p class="soft">Soft shadow</p>
</body>
</html>

3px 3px 0 #f59e0b significa 3px para a direita (físico, em qualquer direção de escrita), 3px para baixo, sem desfoque, âmbar. A segunda sombra desfoca 6px e usa um preto semitransparente, a receita comum para um efeito sutil de profundidade.

A sintaxe

text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?;

Valor	Obrigatório	Significado
offset-x	Sim	Positivo move a sombra para a direita, negativo para a esquerda
offset-y	Sim	Positivo move para baixo, negativo para cima
blur-radius	Não (padrão 0)	O quanto a borda é suave; valores negativos são inválidos
color	Não (padrão: a cor do texto)	Pode vir no começo ou no fim

text-shadow: none remove uma sombra herdada. Mude os valores abaixo para ver o efeito de cada um:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { font-size: 44px; font-weight: 800; margin: 16px 0; }
  </style>
</head>
<body>
  <label>text-shadow: <input id="val" value="4px 4px 8px #2563eb" size="28"></label>
  <p id="sample">Shadow</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.textShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).textShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Experimente -4px -4px 0 #16a34a, 0 0 10px red e duas sombras separadas por vírgula.

Várias sombras: brilho, contorno e 3D

As vírgulas empilham sombras; a primeira é desenhada por cima. Três efeitos saem dessa única regra:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacked shadows</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 40px; font-weight: 800; margin: 0; }
    div { padding: 12px 16px; }
    .neon {
      background: #111827; color: #eff6ff;
      text-shadow: 0 0 4px #93c5fd, 0 0 12px #3b82f6, 0 0 24px #2563eb;
    }
    .outline {
      color: #ffffff;
      text-shadow: -2px -2px 0 #111827, 2px -2px 0 #111827,
                   -2px 2px 0 #111827, 2px 2px 0 #111827;
    }
    .deep {
      color: #f59e0b;
      text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309,
                   3px 3px 0 #b45309, 4px 4px 0 #92400e;
    }
  </style>
</head>
<body>
  <div class="neon">Neon glow</div>
  <div class="outline">Outlined</div>
  <div class="deep">3D text</div>
</body>
</html>

Brilho: deslocamentos zero, desfoque crescente, em fundo escuro.
Contorno: quatro sombras sem desfoque, uma por diagonal. Funciona para contornos finos; para um contorno uniforme mais grosso, -webkit-text-stroke: 2px #111827 (suportado em todos os navegadores atuais, apesar do prefixo) desenha um traço nas bordas das letras.
3D: uma série de sombras sem desfoque, cada uma 1px mais longe, para as letras parecerem extrudadas.

Manter o texto legível em um fundo carregado

Texto branco sobre uma foto ou uma estampa perde as bordas onde o fundo é claro. Uma sombra escura e suave as traz de volta sem uma caixa visível:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Readable on a pattern</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      padding: 32px 16px;
      background: repeating-linear-gradient(45deg, #fde68a 0 20px, #ffffff 20px 40px);
      font-size: 32px; font-weight: 800; color: #ffffff;
    }
    .with { text-shadow: 0 1px 3px rgb(0 0 0 / 70%), 0 0 12px rgb(0 0 0 / 40%); }
  </style>
</head>
<body>
  <div class="hero">Without a shadow</div>
  <div class="hero with">With a shadow</div>
</body>
</html>

A sombra ajuda, mas não garante contraste. Para textos longos sobre uma imagem, acrescente também uma camada sólida ou em degradê atrás do texto.

text-shadow vs box-shadow

	text-shadow	box-shadow
Segue	O formato das letras	A caixa do elemento (e o border-radius dela)
Valor de spread	Não	Sim
`inset`	Não	Sim
Várias, separadas por vírgula	Sim	Sim

Para sombras em cards e botões, veja box-shadow.

Erros comuns

Sombras pesadas e escuras no texto do corpo. Elas borram o formato das letras. Deixe as sombras para títulos e rótulos curtos.
Esquecer o segundo deslocamento. text-shadow: 2px #000 é inválido; os dois deslocamentos são obrigatórios.
Um desfoque negativo. É inválido e a declaração inteira é descartada.
Esperar que a sombra ocupe espaço. Ela só é pintada; sombras grandes podem invadir a linha seguinte ou ser cortadas por overflow: hidden.
Efeitos de brilho em fundos claros. Um brilho claro sobre branco fica invisível. Brilhos precisam de fundo escuro.

Perguntas frequentes

Qual é a sintaxe do text-shadow?

text-shadow: offset-x offset-y blur-radius color;, por exemplo text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. Os dois deslocamentos são obrigatórios; o desfoque vale 0 por padrão e a cor é a do texto.

Como colocar mais de uma sombra no texto?

Separe as sombras com vírgulas: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. A primeira sombra é desenhada por cima das seguintes.

Como fazer um efeito de brilho no texto?

Use sombras sem deslocamento e com desfoque, muitas vezes várias com desfoque crescente: text-shadow: 0 0 4px #60a5fa, 0 0 12px #2563eb;. Em um fundo escuro, isso vira um brilho neon.

O text-shadow tem valor de spread como o box-shadow?

Não. O text-shadow não tem spread nem a palavra-chave inset. Para engrossar a sombra em volta das letras, empilhe várias sombras ou use -webkit-text-stroke para um contorno.

O text-shadow afeta o layout?

Não. A sombra é só pintada; ela não ocupa espaço nem move o conteúdo em volta, então uma sombra grande pode se sobrepor aos elementos próximos.

Conceitos relacionados