Box Shadow
Gere box-shadow CSS com múltiplas sombras e preview ao vivo.
box-shadow: 4px 4px 16px 0px #00000040;Sobre esta ferramenta
O gerador de Box Shadow oferece uma interface visual para construir a propriedade CSS 'box-shadow' sem precisar adivinhar os valores de offset, blur, spread e cor. Você vê o resultado em tempo real no elemento de preview enquanto ajusta cada parâmetro.
Para usar, ajuste os sliders de Offset X, Offset Y, Blur e Spread conforme necessário, escolha a cor da sombra e marque a opção de sombra interna (inset) se quiser efeito invertido. O recurso de múltiplas sombras permite empilhar várias layers na mesma propriedade — clique em "Adicionar sombra", configure cada uma separadamente e todas serão combinadas no código gerado.
Na prática, a ferramenta é usada para criar efeitos de elevação em cards (Material Design-style), destacar botões de ação, adicionar profundidade a modais e dialogs, criar efeitos de foco em campos de formulário e construir sombras difusas suaves em elementos de UI. É especialmente útil para replicar sombras vistas em designs do Figma ou Sketch.
Tudo roda diretamente no seu navegador. Não há envio de dados para servidores externos e nenhum cadastro é necessário.
Perguntas frequentes
O que é a opção 'inset'?
A opção inset inverte a sombra para dentro do elemento, criando um efeito de baixo-relevo ou cavidade. É útil para inputs com efeito pressionado ou contêineres com aparência encaixada.
Posso combinar várias sombras no mesmo elemento?
Sim. Clique em 'Adicionar sombra' para empilhar múltiplas camadas. O CSS gerado combina todas as sombras em uma única propriedade 'box-shadow' separada por vírgulas.
A ferramenta é gratuita?
Sim, sem nenhum custo. Não requer cadastro nem pagamento.
Meus dados são enviados para algum servidor?
Não. Todo o cálculo e a geração do CSS acontecem localmente no seu navegador. Nenhum dado é transmitido.
Funciona no celular?
Sim. Os sliders e seletor de cores são responsivos e funcionam bem em dispositivos móveis.