Gerador Box Shadow
Gerador de box-shadow CSS gratuito online, visualizacao em tempo real
Sintaxe CSS box-shadow
A propriedade CSS box-shadow adiciona efeitos de sombra ao redor de um elemento. Sintaxe: box-shadow: [inset] offset-x offset-y blur spread color. Múltiplas sombras podem ser separadas por vírgulas. Use o editor visual para ajustar valores e ver o resultado em tempo real.
Como usar o gerador de sombra de caixa
Ajuste os controles deslizantes para deslocamento X, deslocamento Y, raio de desfoque e raio de propagação. Escolha uma cor de sombra e alterne a opção inset. O código CSS gerado é atualizado em tempo real e pode ser copiado.
▶Qual é a diferença entre blur e spread?
Blur controla o quão suaves são as bordas da sombra (0 = borda nítida, valores maiores = mais suave). Spread expande ou contrai a sombra em todas as direções. Spread positivo torna a sombra maior que o elemento.
▶Posso adicionar múltiplas sombras?
Sim, CSS suporta múltiplas sombras separadas por vírgulas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);. Combine sombras sutis para um efeito de profundidade mais realista.
▶O que faz a sombra inset?
Uma sombra inset aparece dentro do elemento em vez de fora. Cria uma impressão de que o elemento está pressionado para dentro, como um campo de texto ou depressão de botão.