Gerador de box-shadow CSS
Ajuste deslocamento, desfoque, propagação e cor com pré-visualização ao vivo.
Gerador de box-shadow CSS
Crie uma sombra CSS (box-shadow) de forma visual e copie o código. Ajuste o deslocamento horizontal e vertical, o desfoque, a propagação, a cor e a opção inset, e veja o resultado ao vivo na caixa de pré-visualização.
A sintaxe box-shadow
box-shadow: [inset] offset-x offset-y blur spread color; — por exemplo box-shadow: 0 6px 12px 0 #146c43;. Deslocamentos positivos empurram a sombra para a direita e para baixo; o desfoque suaviza a borda; a propagação aumenta ou reduz; inset desenha a sombra dentro do elemento.
Perguntas frequentes
O que faz a propagação (spread)? Um valor positivo torna a sombra maior que o elemento; um negativo, menor.
O que é uma sombra inset? Desenha a sombra dentro da caixa, útil para efeitos afundados ou pressionados.