Gerador de box shadow

Como ler a sintaxe do box-shadow

Os valores sempre vêm na mesma ordem: deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de espalhamento e cor. Os deslocamentos movem a sombra em relação ao elemento, o desfoque suaviza a borda e o espalhamento aumenta a sombra (ou a diminui, com valores negativos) antes de o desfoque ser aplicado. Adicionar a palavra-chave inset leva a sombra para dentro da caixa, útil para efeitos “afundados” em campos de texto e botões pressionados.

Dicas para uma sombra realista

Sombras convincentes são, em sua maioria, transparentes: mantenha a opacidade entre 10% e 30% e aumente o desfoque em vez de escurecer a cor. Deixe o deslocamento Y maior que o X, já que no mundo real a luz costuma vir de cima. Para dar mais profundidade, empilhe várias sombras separadas por vírgulas: uma pequena e nítida perto do elemento e outra grande e suave mais longe.

Uma sombra revela a altura

No design em camadas, a sombra não é decoração: ela diz o quanto um elemento está elevado em relação à página. Um cartão em repouso tem uma sombra pequena e justa, um menu aberto acima de tudo tem uma grande e difusa, e a diferença entre as duas é o que deixa claro o que está sobre o quê.

Por isso as sombras de uma interface devem ser escolhidas em conjunto, como uma escala: dois ou três níveis fixos (em repouso, elevado, em primeiro plano) usados sempre do mesmo jeito. Uma sombra diferente em cada elemento deixa a página com aspecto desorganizado, mesmo que cada sombra isolada seja bonita.

Duas sombras são melhores que uma

Sombras convincentes quase sempre são duas empilhadas: uma justa e escura logo abaixo do objeto, que define o contato, e outra ampla e bem clara que se espalha ao redor. É assim que a luz real se comporta, com uma sombra nítida por perto e uma penumbra difusa mais longe.

O erro típico é uma única sombra bem escura, que faz o objeto parecer colado em um fundo cinza. As opacidades que funcionam ficam entre 6 e 20%: parece quase nada na tela do designer, e a ideia é justamente essa.

A cor de uma sombra não é preta

Uma sombra preta pura apaga as cores que estão embaixo dela e fica suja em um fundo colorido. Uma sombra realista assume o tom do fundo, mais escuro e mais saturado: em uma página azul-clara, um azul bem escuro no lugar do preto muda o resultado mais do que qualquer ajuste no raio de desfoque.

Vale lembrar também que box-shadow não afeta o layout: a sombra sai da caixa sem empurrar nada, e pode ser cortada por um contêiner com overflow oculto. Se uma sombra some sem motivo, quase sempre é por isso.

Veja também

Para arredondar os cantos do mesmo elemento existe o Gerador de border-radius e para o fundo o Gerador de gradiente CSS. A cor da sombra é escolhida com o Seletor de cores.