Gerador de Box Shadow

Arraste os controlos para criar sombras box-shadow, empilhe camadas para dar profundidade e copie o CSS pronto instantaneamente.

Camadas de sombra
Camada 1
CSS
Ajuste os controlos para moldar a sua sombra.

Cada sombra é renderizada no seu navegador. Nada do que definir aqui é carregado para o BroBroGo.

Perguntas Frequentes

O que o deslocamento, o desfoque e a propagação realmente controlam?

O deslocamento (offset) move a sombra para os lados e para cima/baixo, o desfoque (blur) suaviza as extremidades e a propagação (spread) aumenta ou diminui a sombra antes de desfocar. Um spread negativo encolhe a sombra, o que é útil para um efeito mais sutil e próximo.

O que faz a opção inset?

Uma sombra normal fica do lado de fora do elemento, como a luz atrás de um cartão elevado. A opção Inset inverte a sombra para o interior, fazendo com que o elemento pareça afundado — ideal para campos de introdução de dados ou botões pressionados.

Por que empilhar mais do que uma camada de sombra?

Uma única sombra parece plana a partir de um determinado tamanho. A elevação real combina geralmente uma sombra escura e fechada com outra suave e mais ampla — adicione uma segunda camada e ajuste cada uma de forma independente para obter esse efeito.