Gerador CSS box-shadow
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
Última atualização: 2026 · Ferramenta online gratuita
O que é Gerador CSS box-shadow?
Editor visual online gratuito para criar CSS box-shadow e copiar o código
Como usar
- 1 Selecionar preset — Comece rapidamente com um botão de preset.
- 2 Ajustar controles deslizantes — Ajuste a sombra com os controles de deslocamento X/Y, desfoque e propagação.
- 3 Pré-visualização — Verifique o resultado em tempo real na pré-visualização acima.
- 4 Copiar CSS — Use o botão de copiar para obter o CSS box-shadow.
Ferramentas relacionadas
Perguntas frequentes
Sim, use o botão 'Adicionar sombra' para sobrepor múltiplas sombras.
Sim, ative a caixa de seleção Inset em cada sombra para criar uma sombra interna.
Cinco presets são fornecidos: Subtle, Medium, Large, Inset e Double.
Sim, você pode inserir diretamente rgba(0,0,0,0.15) no campo de cor.
Não. Todos os cálculos são feitos no navegador.