Propriedade CSS text-shadow
Use a propriedade CSS text-shadow para definir a sombra do texto. Veja os valores e exemplos práticos.
A propriedade CSS text-shadow adiciona uma ou mais sombras ao texto de um elemento. É uma das propriedades CSS3 e é amplamente utilizada para criar profundidade sutil, efeitos de brilho e melhorar a legibilidade do texto posicionado sobre fundos complexos.
Esta página aborda a sintaxe, todos os valores, como empilhar múltiplas sombras, efeitos visuais comuns (sombra, brilho, texto em relevo), notas de acessibilidade e como text-shadow difere de box-shadow.
Como funciona
Uma única sombra é descrita por 2 a 3 valores de comprimento seguidos por uma <color> opcional:
- x-offset (primeiro valor, obrigatório) — a distância horizontal. Um valor positivo move a sombra para a direita, um valor negativo para a esquerda.
- y-offset (segundo valor, obrigatório) — a distância vertical. Um valor positivo move a sombra para baixo, um valor negativo para cima.
- blur-radius (terceiro valor, opcional) — a suavidade da sombra. Valores maiores resultam em uma sombra mais suave e espalhada. Não pode ser negativo; o padrão é
0(sombra nítida). - color (opcional) — a cor da sombra. Se omitida, os navegadores utilizam o valor de
colordo elemento. Você pode usar cores HTML com nomes, hex,rgb(),rgba(),hsl()ouhsla().
O x-offset e o y-offset são obrigatórios; o blur-radius e a color são opcionais. A cor e os dois offsets podem ser escritos em qualquer ordem, mas os valores de offset devem seguir a ordem x, y, blur.
| Valor Inicial | none |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdado | Sim. |
| Animável | Sim. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.textShadow = "1px 3px 3px #8ebf42"; |
Sintaxe
Sintaxe da Propriedade CSS text-shadow
text-shadow: h-shadow v-shadow [blur-radius] [color] | none | initial | inherit;Exemplo da propriedade text-shadow:
Exemplo da Propriedade CSS text-shadow
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.shadow {
text-shadow: 2px 2px #1c87c9;
}
</style>
</head>
<body>
<h2>Text-shadow property example</h2>
<p>Some paragraph for example.</p>
<p class="shadow">Some paragraph with the text-shadow property.</p>
</body>
</html>Resultado
Exemplo da propriedade text-shadow com os valores "x-offset", "y-offset", "blur-radius" e "color":
Exemplo da Propriedade CSS text-shadow com x-offset, y-offset, blur-radius e color especificados
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-shadow: 5px 3px 2px #8ebf42;
font: 1em Roboto, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h2>Text-shadow property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>Empilhando múltiplas sombras
Você pode aplicar várias sombras ao mesmo texto separando-as com vírgulas. As sombras são pintadas da frente para trás: a primeira sombra da lista fica no topo, e cada sombra seguinte é desenhada atrás da anterior. Esta é a base para efeitos de brilho, contorno e 3D.
/* a soft glow built from two stacked shadows */
.glow {
color: #fff;
text-shadow:
0 0 5px #8ebf42,
0 0 15px #8ebf42;
}
/* a simple two-tone outline */
.outline {
text-shadow:
1px 1px 0 #1c87c9,
-1px -1px 0 #1c87c9;
}Efeitos comuns
| Efeito | Valor de exemplo | O que faz |
|---|---|---|
| Sombra sutil | text-shadow: 1px 1px 2px rgba(0,0,0,0.4); | Eleva levemente o texto da página. |
| Brilho neon | text-shadow: 0 0 8px #0ff, 0 0 16px #0ff; | Duas sombras borradas empilhadas na mesma cor. |
| Em relevo (gravado) | text-shadow: 0 1px 1px rgba(255,255,255,0.6); | Uma sombra clara abaixo de texto escuro parece entalhada. |
| Legibilidade em fotos | text-shadow: 0 1px 3px rgba(0,0,0,0.8); | Um blur escuro atrás de texto claro mantém a legibilidade. |
Use text-shadow para legibilidade e decoração, não como substituto para contraste real. Sombras pesadas ou de baixo contraste podem dificultar a leitura para alguns usuários, portanto mantenha o contraste entre texto e fundo forte por si só.
text-shadow vs box-shadow
text-shadow desenha uma sombra em torno dos glifos (as formas das letras) do texto, enquanto box-shadow desenha uma sombra em torno da caixa retangular de um elemento. Use text-shadow quando quiser que a sombra siga o contorno dos caracteres, e box-shadow para cartões, botões e outros elementos de interface em caixa.
Valores
| Valor | Descrição |
|---|---|
h-shadow | O deslocamento horizontal (eixo x). Positivo desenha a sombra à direita, negativo à esquerda. |
v-shadow | O deslocamento vertical (eixo y). Positivo desenha a sombra abaixo do texto, negativo acima. |
blur-radius | Define o tamanho e o desfoque da sombra. Valores negativos não são permitidos. O padrão é 0. |
color | A cor da sombra. Nomes de cores, códigos hex, rgb(), rgba(), hsl() e hsla() podem ser usados. |
none | Nenhuma sombra é aplicada. Este é o valor padrão da propriedade. |
initial | Define a propriedade para seu valor padrão (none). |
inherit | Herda a propriedade do elemento pai. |
Suporte dos navegadores e propriedades relacionadas
text-shadow é suportada em todos os navegadores modernos. A sombra não afeta o layout — ela é pintada fora da caixa e nunca altera o tamanho do elemento nem a posição do conteúdo ao redor.
Leitura relacionada: box-shadow, color, opacity, text-decoration, e os pseudoelementos ::first-letter e ::first-line aos quais text-shadow também se aplica.