Propriedade text-shadow

A propriedade text-shadow define uma sombra para o texto. Como valor, a propriedade aceita 4 parâmetros, listados separados por espaços, ou a palavra-chave none, que remove a sombra completamente (este é o valor padrão).

Sintaxe

seletor {
	text-shadow: deslocamento_x deslocamento_y desfoque cor;
}

seletor {
	text-shadow: none;
}

Parâmetros

Parâmetro	Descrição
deslocamento por x	Define o deslocamento da sombra ao longo do eixo X. Um valor positivo desloca para a direita, um valor negativo - para a esquerda.
deslocamento por y	Define o deslocamento da sombra ao longo do eixo Y. Um valor positivo desloca para baixo, um valor negativo - para cima.
desfoque	Define o desfoque da sombra. Quanto maior o valor - mais desfocada a sombra ficará. Parâmetro opcional. Se não for especificado - a sombra será nítida.
cor	Define a cor da sombra em qualquer unidade de cor. Parâmetro opcional. Se não for especificado - a cor da sombra será a mesma do texto.

Os deslocamentos ao longo dos eixos e o desfoque são definidos em qualquer unidade de tamanho, exceto porcentagens.

Exemplo

Vamos deslocar a sombra para baixo e para a esquerda e adicionar um pequeno desfoque:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 5px 5px 3px black;
}

Exemplo . Sombra nítida

Agora vamos fazer a sombra vermelha, deslocá-la para baixo e para a esquerda, mas remover o desfoque - a sombra ficará nítida:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 10px 10px red;
}

Exemplo . Sombra uniforme

Agora a sombra não está deslocada, mas foi adicionado desfoque a ela:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 0px 0px 3px black;
}

Veja também

a propriedade box-shadow,
que define uma sombra para o contêiner