Sombra de Caixa CSS

Propriedade box-shadow CSS

CSS box-shadow A propriedade aplica a sombra ao elemento.

O uso mais simples é especificar apenas a sombra horizontal e vertical:

Elemento <div> amarelo com box-shadow preto

Exemplo

div {
  box-shadow: 10px 10px;
}

Experimente pessoalmente

Próximo, adicione a cor à sombra:

Elemento <div> amarelo com box-shadow cinza

Exemplo

div {
  box-shadow: 10px 10px cinza;
}

Experimente pessoalmente

Próximo, adicione o efeito de borrado à sombra:

Elemento <div> amarelo, com box-shadow borrado

Exemplo

div {
  box-shadow: 10px 10px 5px cinza;
}

Experimente pessoalmente

cartão

Você ainda pode usar box-shadow Efeito de criação de cartões em papel:

1
1 de janeiro de 2021
Café
Café

Exemplo

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Experimente você mesmo: cartão de papelExperimente você mesmo: cartão de imagem

Propriedades de sombra CSS

A tabela a seguir lista as propriedades de sombra do CSS:

Propriedade Descrição
box-shadow Adicionar uma ou mais sombras a um elemento.
text-shadow Adicionar uma ou mais sombras ao texto.