Gerador de sombreamento de caixa.
Ferramenta de gerador de sombreamento CSS online gratuita, com visualização 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.
Se este ferramenta foi útil para você, pense em me dar um café.
Compre um café para mim.