Propriedade box-shadow

A propriedade box-shadow define uma sombra para um bloco. Como valor, a propriedade aceita 6 parâmetros, listados separados por espaços, ou a palavra-chave none, que remove a sombra completamente.

Sintaxe

seletor {
	box-shadow: inset deslocamento_x deslocamento_y desfoque tamanho_sombra cor;
}

seletor {
	box-shadow: none;
}

Parâmetros

Parâmetro	Descrição
`inset`	Parâmetro opcional. Se for especificado, a sombra ficará dentro do contêiner; se não for especificado, ficará fora.
deslocamento por x	Define o deslocamento da sombra ao longo do eixo X. Um valor positivo desloca para a direita, um valor negativo desloca 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 desloca 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.
tamanho da sombra	Define o tamanho da sombra. Um valor positivo expande a sombra, um valor negativo, ao contrário, a comprime. Parâmetro opcional. Se não for especificado, a sombra terá o mesmo tamanho do elemento.
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, o desfoque e o tamanho da sombra são definidos em qualquer unidade de tamanho, exceto porcentagens.

Exemplo

Neste exemplo, a sombra é deslocada para baixo e para a direita e um pequeno desfoque é adicionado:

<div id="elem"></div>

#elem {
	box-shadow: 5px 5px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Exemplo . Sombra nítida

Neste exemplo, a sombra é deslocada para baixo e para a direita, mas não há desfoque (a sombra será nítida):

<div id="elem"></div>

#elem {
	box-shadow: 2px 2px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Exemplo . Sombra uniforme

Neste exemplo, a sombra não é deslocada, mas um desfoque é adicionado a ela:

<div id="elem"></div>

#elem {
	box-shadow: 0px 0px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Exemplo . Tamanho da sombra

Neste exemplo, a sombra não é deslocada, o desfoque é zero, mas um tamanho é adicionado a ela (o preto é a borda, o vermelho é a sombra):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 0 3px red;
	border: 3px solid black;
	width: 300px;
	height: 50px;
}

Exemplo . Desfoque + tamanho da sombra

Neste exemplo, a sombra não é deslocada, mas desfoque e tamanho são adicionados a ela (o preto é a borda, o vermelho é a sombra):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 3px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Exemplo . Sombra interna

Neste exemplo, a sombra está localizada dentro do contêiner:

<div id="elem"></div>

#elem {
	box-shadow: inset 0 0 6px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Veja também

a propriedade text-shadow,
que define uma sombra para o texto