Gerador de sombras CSS (box-shadow)

Mova os controlos e veja de imediato como fica a sombra de uma caixa, de um cartão ou de um botão. Combine várias camadas para sombras mais realistas ou parta de um dos exemplos, e copie o código box-shadow para o seu CSS.

Como funciona o box-shadow

A propriedade box-shadow recebe até quatro medidas e uma cor: deslocamento horizontal e vertical (negativos para a esquerda e para cima), desfocagem (0 = contorno nítido), expansão (aumenta ou, se for negativa, reduz a sombra) e a cor, normalmente preto com transparência (rgba(0, 0, 0, 0.2)). Com a palavra inset, a sombra é desenhada dentro da caixa.

É possível encadear várias sombras separadas por vírgulas. As sombras mais realistas combinam uma sombra curta e nítida com outra maior e difusa, como fazem o Material Design e a maioria dos sistemas de design.

Truques com box-shadow

Uma sombra sem deslocamento nem desfocagem e com expansão (0 0 0 4px) desenha um contorno que não ocupa espaço, ideal para o foco de botões e campos. O neumorfismo usa duas sombras opostas, uma clara e outra escura, sobre um fundo da mesma cor da caixa.

As sombras não afetam a paginação nem o tamanho do elemento, mas sombras muito grandes e difusas em muitos elementos podem tornar o deslocamento mais lento nos telemóveis. Para sombrear a silhueta de uma imagem PNG transparente use filter: drop-shadow() e, para textos, text-shadow.