Gerador de Box Shadow
Crie sombras CSS com sliders visuais. Múltiplas camadas, inset, cor e opacidade. Preview em tempo real.
O que é Gerador de Box Shadow?
Crie sombras CSS (box-shadow) visualmente e copie o código, direto no navegador. O humberto.ai deixa você ajustar deslocamento X/Y, desfoque, espalhamento, cor e sombra interna (inset), com preview em tempo real e suporte a múltiplas camadas. Ideal para dar profundidade a cards, botões e modais sem tentativa e erro no CSS. Sem cadastro.
Como usar
- Ajuste deslocamento horizontal e vertical, desfoque e espalhamento.
- Escolha a cor e a opacidade da sombra.
- Adicione camadas para sombras mais ricas ou ative o inset (sombra interna).
- Veja o preview e copie a propriedade box-shadow gerada.
Perguntas frequentes
O que cada valor do box-shadow significa?
A ordem é: deslocamento X, deslocamento Y, desfoque (blur), espalhamento (spread) e cor. Ex.: '0 4px 10px 0 rgba(0,0,0,0.15)' — sombra 4px abaixo, 10px de desfoque, preto a 15% de opacidade.
O que é o inset?
inset transforma a sombra em interna, projetada para dentro do elemento em vez de para fora. Útil para efeitos de 'pressionado', campos afundados e destaques internos.
Posso combinar várias sombras?
Sim. box-shadow aceita várias sombras separadas por vírgula. Combinar uma sombra suave e ampla com outra mais próxima e definida cria profundidade mais realista — a ferramenta gera as camadas para você.
Sombra com muito desfoque pesa na performance?
box-shadow é barato na maioria dos casos, mas desfoques muito grandes animados (em transições) podem custar em telas fracas. Para sombras animadas com frequência, considere trocar por transform/opacity.
Qual a diferença entre blur e spread?
blur (desfoque) suaviza a borda da sombra; spread (espalhamento) aumenta ou diminui o tamanho da sombra antes do desfoque. spread positivo deixa a sombra maior que o elemento; negativo, menor.