Gerador de box-shadow CSS online e grátis

Q: Como faço uma sombra interior?

Coloque inset no início: box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);. É útil para campos de formulário ou botões premidos.

Q: Porque é que a sombra do meu PNG transparente sai quadrada?

Porque o box-shadow segue a caixa do elemento, não o desenho. Para seguir a silhueta, use filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)).

Como funciona o box-shadow

A propriedade box-shadow desenha uma ou várias sombras à volta da caixa de um elemento. Cada sombra escreve-se por esta ordem:

box-shadow: [inset] deslocamento-x deslocamento-y [desfoque] [expansão] cor;

Deslocamento horizontal e vertical: quanto a sombra se move para a direita e para baixo. Com valores negativos vai para a esquerda ou para cima.
Desfoque: quanto maior, mais esbatida a margem. Com 0 a sombra tem a margem nítida.
Expansão: aumenta ou reduz a sombra antes de a desfocar. Um valor negativo esconde-a por baixo do elemento.
Cor: quase sempre preto ou a cor do fundo com pouca opacidade, por exemplo rgba(0, 0, 0, 0.2).
inset: a sombra fica por dentro do elemento, como se estivesse afundado.

Várias sombras no mesmo elemento

As sombras separam-se com vírgulas e a primeira fica por cima das restantes. Combinar uma sombra curta e marcada com outra ampla e suave dá um resultado muito mais natural do que uma única sombra escura: é o que fazem os exemplos Elevada e Por camadas.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 8px 24px rgba(0, 0, 0, 0.12);

Sombras em imagens: box-shadow ou drop-shadow

box-shadow segue a forma da caixa, incluindo o seu border-radius, por isso é o que precisa para fotos e cartões. Se a imagem for um PNG ou um SVG com fundo transparente e quiser que a sombra siga o contorno do desenho, use o filtro drop-shadow():

img.logo { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); }

drop-shadow() não suporta expansão nem inset, e não aceita várias camadas separadas por vírgulas.

Dicas

Use opacidades baixas (entre 0,05 e 0,25): uma sombra preta a 50 % quase nunca fica bem.
Para uma sombra só em baixo, combine deslocamento vertical com expansão negativa: 0 8px 6px -6px.
No modo escuro as sombras mal se veem: uma margem subtil ou um fundo um pouco mais claro funcionam melhor.
Para animar uma sombra, anime a opacity de um pseudoelemento que a tenha, e não o próprio box-shadow: é muito mais fluido.

Perguntas frequentes

O que é o box-shadow em CSS?

É a propriedade que adiciona sombras à caixa de um elemento. Aceita deslocamento, desfoque, expansão, cor e a palavra-chave inset, e podem aplicar-se várias sombras separadas por vírgulas. Funciona em todos os navegadores atuais sem prefixos.

Como ponho uma sombra só na parte de baixo?

Use um deslocamento vertical positivo e uma expansão negativa da ordem do desfoque, para que a sombra não apareça nos lados: box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);

Como faço uma sombra interior?

Coloque inset no início: box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);. É útil para campos de formulário ou botões premidos.

Posso usar várias sombras ao mesmo tempo?

Sim, separando-as com vírgulas. A primeira da lista é pintada por cima. Neste gerador, cada sombra é uma camada.

Porque é que a sombra do meu PNG transparente sai quadrada?

Porque o box-shadow segue a caixa do elemento, não o desenho. Para seguir a silhueta, use filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)).

O box-shadow afeta o desempenho?

Uma sombra estática quase não custa nada. O que pesa é animá-la ou usar desfoques muito grandes em muitos elementos, porque obriga a repintar. Para animações, altere a opacidade de um pseudoelemento com a sombra.

Gerador de box-shadow

Código CSS

Como funciona o box-shadow

Várias sombras no mesmo elemento

Sombras em imagens: box-shadow ou drop-shadow

Dicas

Perguntas frequentes

Mais ferramentas