Gerador CSS box-shadow online e gratuito. Ajuste deslocamento, desfoque, extensão e cor com pré-visualização ao vivo. Copie o código. No navegador.
Pressione Ctrl+D para adicionar esta página aos favoritos
O gerador de sombras CSS é uma ferramenta online gratuita que edita visualmente a propriedade box-shadow.
Sim, você pode adicionar múltiplas sombras para criar efeitos complexos de profundidade. Cada sombra pode ser ajustada individualmente.
Uma sombra inset aparece dentro do elemento em vez de fora. Enquanto box-shadow normal aparece fora, inset cria um efeito de profundidade.
Sombras reais não são pretas: são a cor do fundo escurecida, e vão suavizando na direção das bordas. Em vez de uma sombra preta pesada a 30%, empilhe duas ou três camadas bem tênues com raios de desfoque diferentes — por exemplo 1 px colada à borda, 8 px atrás dela e uma bem leve de 24 px mais afastada. Suponha luz vindo de cima: dê apenas deslocamento vertical e deixe o horizontal em zero.
Num layout estático o custo é desprezível, mas muda no instante em que você anima. Fazer transição do valor box-shadow no hover obriga o navegador a recalcular o desfoque a cada quadro, o que engasga visivelmente em aparelhos modestos. Se precisa de uma sombra que cresça na interação, anime a opacidade ou o transform de uma camada de sombra já renderizada: o resultado é bem mais suave.