Pontos-chave
- 01Cada parâmetro de box-shadow possui seu próprio controle deslizante mais uma entrada numérica para ajuste de precisão em pixels.
- 02O botão inset alterna entre sombra projetada e sombra interna para efeitos pressionados ou neumórficos.
- 03Cor e opacidade são controladas separadamente, gerando rgba() para CSS legível.
- 04A visualização usa a propriedade CSS real em um elemento real — o que você vê é exatamente o que sua folha de estilos renderiza.
Por Que Usar um Gerador Visual de Box-Shadow
CSS box-shadow aceita até seis valores — deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de propagação, cor e a palavra-chave inset opcional. Digitá-los de memória funciona para sombras simples, mas para qualquer coisa mais refinada — um brilho apertado, uma sombra projetada profunda, uma camada de elevação suave — você fica adivinhando e recarregando até que algo pareça certo.
Um gerador visual reduz esse ciclo de iteração. Mova um controle deslizante, veja a mudança instantaneamente e copie apenas quando estiver satisfeito. O gerador de box-shadow do Handytool funciona inteiramente no seu navegador, então a visualização é a propriedade CSS real aplicada a um elemento real — sem diferenças de renderização entre a ferramenta e sua página atual.
Como Projetar uma Sombra de Caixa
- 01
Ajuste os deslocamentos horizontal e vertical
Valores positivos movem a sombra para a direita e para baixo. Valores negativos a movem para a esquerda e para cima. Uma sombra centralizada (0, 0) cria um efeito de brilho.
- 02
Defina o raio de desfoque
Valores de desfoque mais altos criam sombras mais suaves e difusas. Desfoque zero produz um contorno de sombra duro e sólido.
- 03
Ajuste o raio de propagação
Propagação positiva amplia a sombra antes do desfoque. Propagação negativa a encolhe, útil para sombras apertadas sob elementos.
- 04
Escolha uma cor e opacidade
Use o seletor de cor para escolher a tonalidade da sombra, depois reduza a opacidade para sutileza. A saída usa rgba() para manter os valores legíveis.
- 05
Alterne inset se necessário
Inset alterna de uma sombra projetada para uma sombra interna — útil para botões pressionados, entradas afundadas e superfícies neumórficas.
- 06
Copie a declaração CSS
Clique em Copiar para obter o valor completo de box-shadow e cole-o em sua folha de estilos.
Sem Upload, Sem Conta
O gerador é totalmente do lado do cliente. Suas escolhas de cor, valores numéricos e estados de visualização permanecem no seu navegador — nada é enviado para um servidor. Não há conta para criar e sem limite de uso.
Como o elemento de visualização usa a propriedade CSS box-shadow real, a saída é precisa por definição — não há renderização de canvas ou aproximação de captura de tela envolvida. Os valores de pixel que você copia são os valores de pixel que o navegador aplica.
Perguntas Frequentes do Gerador de Box-Shadow
O que o valor de propagação faz?
Propagação positiva amplia a sombra em todas as direções antes do desfoque ser aplicado; propagação negativa a encolhe. Útil para brilhos apertados e definidos quando combinado com desfoque baixo.
Posso adicionar múltiplas sombras de caixa?
Este gerador produz uma sombra por vez. Para camadas, copie o valor e separe múltiplas sombras com vírgulas em seu CSS — box-shadow aceita uma lista separada por vírgulas.
Por que minha sombra interna é invisível?
Sombras inset são desenhadas dentro do elemento, então precisam de uma cor de fundo ou preenchimento visível para aparecer. Não aparecerão em elementos transparentes ou de tamanho zero.
A visualização é precisa em pixels?
Sim — a visualização usa a propriedade CSS box-shadow real em um elemento DOM real, então o que você vê é exatamente o que sua folha de estilos produzirá.
O que é uma sombra neumórfica?
Neumorfismo usa duas sombras — uma clara e uma escura — deslocadas em direções opostas para fazer um elemento parecer elevado ou pressionado de uma superfície plana. Ambas as sombras são tipicamente inset para a variante pressionada.