Gerador de Box Shadow
Arraste os controles para criar sombras box-shadow, empilhe camadas para dar profundidade e copie o CSS pronto instantaneamente.
Cada sombra é renderizada no seu navegador. Nada do que você define aqui é enviado para o BroBroGo.
FAQ
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 bordas e a propagação (spread) aumenta ou diminui a sombra antes de desfocar. Um spread negativo encolhe a sombra, ú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. O Inset inverte a sombra para dentro, fazendo o elemento parecer afundado — ideal para campos de entrada ou botões pressionados.
Por que empilhar mais de uma camada de sombra?
Uma única sombra parece artificial a partir de certo tamanho. A elevação real geralmente combina 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.